доступ к вложенному массиву json с использованием angular

Question

Я пытаюсь получить доступ к вложенному древовидному представлению дочернего элемента из массива json. Я столкнулся с трудностями при доступе к нескольким дочерним элементам из приведенного ниже комплекса json, застрял с ним в течение нескольких дней .... может кто-нибудь помогите мне, как получить доступ ко всем детям с помощью angular или через java script. Также как я могу узнать, какие дети принадлежат какому родителю. Я смог получить ребенка от первых родителей, только попробовав следующий код:

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"
              },
            ]
          },
        ]
      },
    ]

Answer 1

Поскольку у вас есть древовидная структура детей, вам необходимо использовать рекурсию

 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);

Answer 2

У вас есть json вложенный json. Нам нужно вызвать для него рекурсивную функцию. Решение ниже может помочь вашей проблеме

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);