Access nested JSON elements in Angular2 Service

Question

I have created an app with dynamic forms as explained in this tutorial: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

Now I want to load the questions from a json file on a server instead of hard coded questions.

The JSON looks like this:

{
 "ventureReason":[
  {
"label": "Venture Reason",
"controlType": "dropdown",
"options": [
  {
    "key": "solid",
    "value": "Solid"
  },
  {
    "key": "great",
    "value": "Great"
  }
]
 }
],
"blablabla": [
{
  "label": "Blablabla",
  "controlType": "textbox",
  "options": [
  ]
}
]
}

In the QuestionService I want to build the questions based on value of controlType. But item.controlType always returns undefined. data contains the whole json file.

export class QuestionService {

questionUrl:string = `db`;
data:any;
questions : QuestionBase<any>[] = [];

constructor(
    private http: HttpService
){}

getQuestions() {
    return this.http.get(this.questionUrl)
    .map(res => [res.json()])
    .map(data => {
        this.data = data;
        return this.buildQuestions(data);
    })
}

buildQuestions(data) {
console.log("data: "+ JSON.stringify(data));  //whole json file
    let questions = [];
    data.forEach((item: QuestionGroup) => {
        console.log("item: " + JSON.stringify(item)); //whole json file
        console.log("item: " + JSON.stringify(item.controlType));  //undefined
        if (item.controlType == 'dropdown') {
            item.controlType = 'dropdown';
            questions.push(new DropdownQuestion(item));
        }
        else if (item.controlType == 'textbox') {
            item.controlType = 'textbox';
            questions.push(new TextboxQuestion(item));
        }
    });
    return questions;
}

}

How could I acces the controlType to build the questions?

Which part of your entire JSON object `item: QuestionGroup` should represent? I'm asking because both `console.log("data: "+ JSON.stringify(data));` and `console.log("item: " + JSON.stringify(item));` result in printing the whole json file (like you mentioned in your comments). — Emin Laletovic, Apr 21 '17 at 15:20
one item should be `ventureReason` and the other `blablabla` — maidi, Apr 21 '17 at 15:30
Possible duplicate of [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — Heretic Monkey, Apr 21 '17 at 20:12

score 0 · Answer 1 · answered Apr 21 '17 at 15:35

0

Based on the JSON object you've posted, you need to do this:

    data.forEach((questionGroup: QuestionGroup) => {
       questionGroup.forEach((item: any) => { 
       //you can replace 'any' with the appropriate class that represents 'item'
          //access item properties, like controlType
          console.log(item.controlType);
       });
    });

answered Apr 21 '17 at 15:35

Emin Laletovic

4,084
1
13
22

now the console.log of item isn't called at all but the console.log on data is executed 2 times – maidi Apr 21 '17 at 15:47

score 0 · Answer 2 · answered Apr 21 '17 at 20:06

0

It looks like the item's value is an array of objects. Maybe I'm mistaken, but I think item[0].controlType should return the result for which you're looking.

answered Apr 21 '17 at 20:06

Zach Newburgh

563
3
11

score 0 · Answer 3 · answered Apr 21 '17 at 20:53

Your problem is, when you look closely at your JSON, your data you want to access is inside an array ventureReason. You want the content of that array, so make a slight change to your mapping, and it should be all good!

.map(res => res.json().ventureReason) // extract the data from the array

so your item.controlType was undefined, since there was no property, since your singleitem actually contained only the property ventureReason and the whole array.

Here's

Demo

How did it go with these answers, did any of them solve your issue? :) — AT82, Apr 24 '17 at 19:32

Access nested JSON elements in Angular2 Service

3 Answers3

Demo