accessing nested json array using angular

Question

I am trying to access the nested tree view of child item from json array.I am facing difficulties in accessing multiple children from the below complex json,have been stuck with it for days....can anyone help me how to access all children using angular or through java script,Also how can i know that which children belong to which parent.I was only able to get the child of first parents by trying out the below code:

here the json is assigned to value=datasource.data;

this.dataSource.data.forEach((item,i)=>{
            console.log(item.children);
            if(item.children){
              item.children.forEach((childItems,i)=>{
                console.log(childItems);
              })
            }


Here is the json :


TREE_DATA: FoodNode[] =
  
      [
      {
        name: 'Dashboard',
        id: "0",
        startButton: "enabled",
        stopButton: "enabled",
        type: "ec2",
        children: [
          {
            name: 'Backend-Server',
            id: "1",
            startButton: "enabled",
            stopButton: "enabled",
            type: "ec2",
            children: [
              {
                startButton: "disabled",
                stopButton: "enabled",
                type: "ec2",
                name: 'Backend-Server-1',
                id: "3"
              },
              {
                startButton: "enabled",
                stopButton: "disabled",
                type: "ec2",
                name: 'Backend-Server-2',
                id: "4"
              },
            ]
          },
          {
            startButton: "enabled",
            stopButton: "disabled",
            type: "rds",
            name: 'Frontend-Server',
            id: "5"
          },
          {
            startButton: "enabled",
            stopButton: "enabled",
            type: "ec2",
            name: 'Backup-Server',
            id: "6"
          },
        ]
      },
       {
        name: 'Admin',
        id: "7",
        startButton: "enabled",
        stopButton: "disabled",
        type: "ec2",
        children: [
          {
            name: 'Backend-Server',
            id: "8",
            startButton: "enabled",
            stopButton: "disabled",
            type: "ec2",
            children: [
              {
                startButton: "enabled",
                stopButton: "disabled",
                type: "ec2",
                name: 'Backend-Server-1',
                id: "9"
              },
              {
                startButton: "enabled",
                stopButton: "disabled",
                type: "ec2",
                name: 'Backend-Server-2',
                id: "10"
              },
            ]
          }, {
            startButton: "enabled",
            stopButton: "disabled",
            type: "ec2",
            name: 'Frontend-Server',
            id: "11",
            children: [
              {
                startButton: "enabled",
                stopButton: "disabled",
                type: "ec2",
                name: 'Frontend-Server-1',
                id: "12",
              },
              {
                startButton: "enabled",
                stopButton: "disabled",
                type: "ec2",
                name: 'Frontend-Server-3',
                id: "13"
              },
            ]
          },
        ]
      },
    ]

Is this actually json or is it an object literal (or array of). (What you showed is an object literal.) With an object literal you can do something like `TREE_DATA[0].children[0].children[1].id => 4`. — Gunnar B., Aug 07 '20 at 05:19
cool man,@Gunner ,Do you know how it can be fetched dynamically instead of giving [0] as manual index can it be done by passing i as a loop parameter in for loop??any help would be appreciated — Somesh T, Aug 07 '20 at 07:01
Well, it is normal array iteration, so you can use whichever loop-variant that provides some form of index to access childs with a dynamic property (e.g. foreach has an optional index parameter). Now, when it comes to going up the tree i.e. accessing the parent (like you asked in another comment), that is not possible with your current structure since a child has no information about its parent. You would need a `parent` property in each object (that needs to know about its parent). Maybe this helps, 2nd answer https://stackoverflow.com/questions/2980763/javascript-objects-get-parent — Gunnar B., Aug 07 '20 at 07:55
(parent property pointing to id would make sense in this case.) — Gunnar B., Aug 07 '20 at 08:02

score 0 · Answer 1 · answered Aug 07 '20 at 05:45

0

The json you have is a nested json.We need to call recursive function for it.The below solution might help your problem

var childItem=[];

function getChildren(data){
    data.forEach((each)=>{
        if(each.children){
            getChildren(each.children);
        }else{
            childItem.push(each);
        }
    });
}

getChildren(this.dataSource.data);
console.log(childItem);

answered Aug 07 '20 at 05:45

Dhiraj Singh

79
4

man thanks for the heads up...Can you also tell me how i can list all child and parent node.,i.e to which parent the child belongs to? your solution is having all the children in the array....any help would be greatfull – Somesh T Aug 07 '20 at 06:49
For achieving that we need some property in the child object to identify the parent (i.e. parentId).As in your data there is no such property available. – Dhiraj Singh Aug 07 '20 at 08:36

score 0 · Answer 2 · answered Aug 07 '20 at 06:03

Since you have a tree structure of children You need to use recursion

 const { data } = this.dataSource;
    var  children=[];
    function getChildNodes(data){  
        data.forEach((child)=>{
            child.children)? getChildNodes(child.children): childrens.push(child);         
        });
    }
    
    getChildNodes(data);
    console.warn(children);

accessing nested json array using angular

2 Answers2