Get nested Childrens in JSON using Angular2

Question

I'm working on json Data with inner childrens. i need to get all the name's in the json.

json data

this.res = [  
                  {
                    "children": [
                      {
                        "children": [
                          {
                            "children": [],
                            "name": "P Sub Child 3",
                          },
                          {
                            "children": [
                              {
                                "children":[],
                                "name" : "data"
                              }
                            ],
                            "name": "PSubChild2",
                          }
                        ],
                      "name": "PChild1",
                      },
                      {
                        "children": [
                          {
                            "children": [],
                            "name": "PSubChild3",
                          }
                        ],
                        "name": "PChild2",
                      }
                    ],
                    "name": "Parent1",
                  },
                  {
                  "children": [],
                  "name": "Parent2",
                  }
    ];

in my application names of every child has to store in the variables using angular2. Data is dynamic changes as per the user in my application

Answer 1

Here is a plunkr of a possible implementation https://plnkr.co/edit/njM1HLx7vuZY9loto2pM?p=preview

Create your own datatype:

export class MyNode {
  children:Array<MyNode>;
  name:string;
}

and then create a method to recursively loop your parents to get their names and the names of the children

parents:Array<MyNode> = [
    {
      "children": [
        {
          "children": [
            {
              "children": [],
              "name": "P Sub Child 3",
            },
            {
              "children": [
                {
                  "children":[],
                  "name" : "data"
                }
              ],
              "name": "PSubChild2",
            }
          ],
          "name": "PChild1",
        },
        {
          "children": [
            {
              "children": [],
              "name": "PSubChild3",
            }
          ],
          "name": "PChild2",
        }
      ],
      "name": "Parent1",
    },
    {
      "children": [],
      "name": "Parent2",
    }
  ];

 names:Array<string>=[];
 getAllNames(){
    this.getNameHelper(this.parents);
 }
 getNameHelper(parents:Array<MyNode>){
    for(var p of parents){
      if(p.name){
        this.names.push(p.name);
      }
      if(p.children){
        this.getNameHelper(p.children);
      }
    }
  }

Answer 2

From what I understand you want to just get the value of the name property down the hierarchical data you have then as most here suggested you have to use recursion to get to the name property. With Rxjs it becomes a bit easier to do like following:

Observable.from(this.res)
.expand(d => d.children.length > 0 ? Observable.from(d.children) : Observable.empty())
.subscribe(d => console.log(d.name));

I have made a working sample here: https://jsfiddle.net/ibrahimislam/ba17w8xz/1/