访问Angular2 Service

时间:2017-04-21 14:50:55

标签: json angular

我已经使用动态表单创建了一个应用,如本教程中所述:https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

现在我想从服务器上的json文件加载问题而不是硬编码问题。

JSON看起来像这样:

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

QuestionService中,我想根据controlType的值来构建问题。但item.controlType始终返回undefined。 data包含整个json文件。

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

}

我如何访问controlType来构建问题?

3 个答案:

答案 0 :(得分:0)

根据您发布的JSON对象,您需要执行以下操作:

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

答案 1 :(得分:0)

看起来项目的值是一个对象数组。也许我错了,但我认为UITableViewDelegate应该返回您正在寻找的结果。

答案 2 :(得分:0)

您的问题是,当您仔细查看JSON时,您要访问的数据位于数组ventureReason内。你想要那个数组的内容,所以稍微改变你的映射,它应该都很好!

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

因此您的item.controlType未定义,因为没有属性,因为您的单个item实际上只包含属性ventureReason和整个数组。

这是

Demo