Programatically gathering nested object keys from response in Angular

Question

I am receiving a nested response back from a server in my Angular app. I need to access the data inside, but there are several responses contained within one parent object. So far I have been able to drill inside somewhat, but I am having trouble getting in further.

So far I have this code:

getPlants(): Observable<any> { 
const headers = { headers: this.headers };
return this.httpClient.get(`${this.requestUrl}, headers);
}

This gets the data in question. Next, I have the function where I am having issues.

destructurePlants() {

         this.getPlants().subscribe(data => {
         const plants = Object.keys(data).map(e => data[e]);
         plants.forEach(plant => {
              console.log(plant);
         });
    }

The data I am getting back comes back like this.

{
     "plantMap": {
          "1": {
               "PLANTTYPE1": {
                    "id": "1",
                    "style": "plantStyle",
                    "styleDesc": "Luxurious green",
                    "codeId": "1"
               },
               "PLANTTYPE2": {
                    "id": "1",
                    "style": "plantStyle2",
                    "styleDesc": "Luxurious red",
                    "codeId": "2"
               },
               "PLANTTYPE3": {
                    "id": "1",
                    "style": "plantStyle3",
                    "styleDesc": "Luxurious succulent",
                    "codeId": "3"
               },
          "2": {
               "TREE1": {
                    "id": "2",
                    "style":"plantStyle",
                    "styleDesc":"Oak",
                    "codeId": "1"
               },
               "TREE2": {
                    "id": "2",
                    "style": "plantStyle2",
                    "styleDesc": "Evergreen",
                    "codeId": "2"
               },
               "TREE3": {
                    "id": "2",
                    "style": "plantStyle3",
                    "styleDesc": "Myrtle",
                    "codeId": "3"
               }
         }
     }
}

Ideally, I would like to be able to grab each 1, 2, etc and then drill down further into PLANTTYPE AND TREETYPE objects, etc.

What final object should look like after parsing the response can you please add final object you need in your question. — Kamran Khatti
– Kamran Khatti, Commented Sep 11, 2020 at 19:31
I would like to push each of the Objects under each number 1 or 2 for example into an array, that way I could access them by the number. So in the future, if I needed the data nested behind 1, 2 or any other number found in the response, I can grab it and use it my HTML templates etc. — user3019183
– user3019183, Commented Sep 11, 2020 at 19:39

Asaf · Accepted Answer · 2020-09-11 19:36:09Z

you forgot one closing } for your plantMap["1"], beside that, The output of the snippet below is array of plants.

"1": {
           "PLANTTYPE1": {
                "id": "1",
                "style": "plantStyle",
                "styleDesc": "Luxurious green",
                "codeId": "1"
           },
           "PLANTTYPE2": {
                "id": "1",
                "style": "plantStyle2",
                "styleDesc": "Luxurious red",
                "codeId": "2"
           },
           "PLANTTYPE3": {
                "id": "1",
                "style": "plantStyle3",
                "styleDesc": "Luxurious succulent",
                "codeId": "3"
           },
      "2": {

const data =  {
          "1": {
               "PLANTTYPE1": {
                    "id": "1",
                    "style": "plantStyle",
                    "styleDesc": "Luxurious green",
                    "codeId": "1"
               },
               "PLANTTYPE2": {
                    "id": "1",
                    "style": "plantStyle2",
                    "styleDesc": "Luxurious red",
                    "codeId": "2"
               },
               "PLANTTYPE3": {
                    "id": "1",
                    "style": "plantStyle3",
                    "styleDesc": "Luxurious succulent",
                    "codeId": "3"
               }},
          "2": {
               "TREE1": {
                    "id": "2",
                    "style":"plantStyle",
                    "styleDesc":"Oak",
                    "codeId": "1"
               },
               "TREE2": {
                    "id": "2",
                    "style": "plantStyle2",
                    "styleDesc": "Evergreen",
                    "codeId": "2"
               },
               "TREE3": {
                    "id": "2",
                    "style": "plantStyle3",
                    "styleDesc": "Myrtle",
                    "codeId": "3"
               }
         }
     };
      
let arr = [];
const plants = Object.keys(data).map(e => data[e]);
plants.forEach(plant => {
  const plant_ = Object.keys(plant).map(e => plant[e]);
  arr.push(...plant_);
});
console.log(arr);

Quentin Grisel · Accepted Answer · 2020-09-11 19:43:08Z

1

You can (recommanded) use rxjs to access your data. The way you do it highly depend on what you want to achieve but here is a simple example on Stackblitz of how you can do that, and here is the code :

import { of } from 'rxjs'; 
import { map, pluck, tap } from 'rxjs/operators';


const data = {
     "plantMap": {
          "1": {
               "PLANTTYPE1": {
                    "id": "1",
                    "style": "plantStyle",
                    "styleDesc": "Luxurious green",
                    "codeId": "1"
               },
               "PLANTTYPE2": {
                    "id": "1",
                    "style": "plantStyle2",
                    "styleDesc": "Luxurious red",
                    "codeId": "2"
               },
               "PLANTTYPE3": {
                    "id": "1",
                    "style": "plantStyle3",
                    "styleDesc": "Luxurious succulent",
                    "codeId": "3"
               },
          },
          "2": {
               "TREE1": {
                    "id": "2",
                    "style":"plantStyle",
                    "styleDesc":"Oak",
                    "codeId": "1"
               },
               "TREE2": {
                    "id": "2",
                    "style": "plantStyle2",
                    "styleDesc": "Evergreen",
                    "codeId": "2"
               },
               "TREE3": {
                    "id": "2",
                    "style": "plantStyle3",
                    "styleDesc": "Myrtle",
                    "codeId": "3"
               }
          }
      }
};

const data$ = of(data);
let plantTypes;
let trees;

data$.pipe(
  pluck('plantMap'),
  tap(obj => {
    plantTypes = obj['1'];
    trees = obj['2'];
  }),
  tap(_ => {
    console.log('plantTypes = ', plantTypes);
    console.log('trees = ', trees);
  })
).subscribe();

Here I use pluck to select the node I want to target. Pretty simple here since you have only one.

Then I set both segments of data inside constant with tap and then display them with another tap (could be in the same of course, just an example to show that you can chain method inside the pipe).

The last subscribe() is just here to trigger the code. It is only triggered when a subscription is made to the observable, either like that of though the asyncPipe of angular (which is a must use when you can).

If you want to access you data differently, please explain your context and what you try to achieve and i'll edit my answer :).

Note that I added a bracket { to close the 1 part of your object, I assumed it should be like this.

edited Sep 11, 2020 at 19:43

answered Sep 11, 2020 at 19:37

Quentin Grisel

5,0171 gold badge13 silver badges19 bronze badges

2 Comments

user3019183 Over a year ago

Thanks for the help so far! So basically, this is going to be a list of 15 or so responses (I only put in 2 for brevity's sake). I essentially need to sort these out so that each set of data under the number (1, 2, 3 etc) can be referenced by the number and the data can be accessed inside each number. I will create an interface to help with this since they will have the "id", "style", "styleDesc", and "codeId" properties.

Quentin Grisel Over a year ago

@user3019183 Ok well you just need to fix the brackets problem. You object is already accessible through data.plantMap["1"]. This will return all the plantTypes, 2 will return trees etc..

Collectives™ on Stack Overflow

Programatically gathering nested object keys from response in Angular

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related