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

plnkr.co/edit/4sj8RN?p=preview i found an example in angularjs but i want it in angular2 — Nunna Suma
– Nunna Suma, Commented Jun 1, 2017 at 8:15
What have you tried so far? --- Also reactivex.io/learnrx will help you figure out this sort of thing on your own in the future. — evolutionxbox
– evolutionxbox, Commented Jun 1, 2017 at 8:19
@evolutionxbox i tried in many ways but can't get the inner childrens. — Nunna Suma
– Nunna Suma, Commented Jun 1, 2017 at 8:23
You could make your own datatype, e.g MyNode which has children nodes (Array<MyNodeNode> childen) and a name attrbute (nodeName:string). Then you can create a method that recursively find all the names in your data-object. — John
– John, Commented Jun 1, 2017 at 8:51
@NunnaS I added a possible implementation as an answer. Hope it works for you and that you understand. — John
– John, Commented Jun 1, 2017 at 9:19

lbrahim · Accepted Answer · 2017-06-01 09:21:33Z

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/

answered Jun 1, 2017 at 9:21

lbrahim

3,83012 gold badges60 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John · Accepted Answer · 2017-06-01 09:12:01Z

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

Collectives™ on Stack Overflow

Get nested Childrens in JSON using Angular2

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related