We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Unable to get child element

I want to retrieve the child element in tree view to drag and drop the nodes. But unable to get it in treeview. I am attaching the json data and the structure of treeview I want. Please help me to retrive the child element. Attaching my json data in Zip file and also you can get the json data from this link: https://textuploader.com/11mz5
This is the tree structure that I want to have:

Attachment: data_3612040b.zip

1 Reply

AB Ashokkumar Balasubramanian Syncfusion Team August 8, 2019 10:29 AM UTC

Hi Anjali Kumari 
Good day to you. 
We have checked your JSON data and prepared a sample based on your requirement. To render TreeView and for performing tree node operations such as adding a node, performing drag and drop operation, “id” plays an important role. In your shared data there is no “id” available for parent and child data so that the child nodes are not rendering. We have programmatically added id for parent and child data using the following code snippet. 
constructor(private dataService: DataService) { 
        this.dataService.getDataFromAPI().subscribe(response => { 
            var temp = Object.values(response); 
            var arr = []; 
            for (var i = 0; i < temp.length; i++) { 
                var stringifiedData = JSON.stringify(temp[i]).replace("title", "type"); 
                var addId = JSON.parse(stringifiedData); 
                // adds id for parent record 
                addId.id = i + 1; 
                // adds id for child record 
                for (var j = 0; j < addId.crime_types.length; j++) { 
                    addId.crime_types[j].id = addId.id + j + 1; 
            this.data = arr; 
            this.tree.fields.dataSource = this.data; 
If you want to get the data of particular node(with child item data), you can use the getTreeData method. 
Please check the sample and get back to us, if you need any further assistance on this. 
Ashokkumar B. 

Live Chat Icon For mobile
Up arrow icon