Question

我有以下JSON文件：

{
  "fruites": [
          {"id" :"f1", "name": "apple", "selected": "false"},
          {"id": "f2" , "name":"orange", "selected": "false"}
          ]
}


Here is my JSON interface:
export interface FruitsType {

  id: String;
  name: String;
  selected : String;
}

不确定这是否是正确的界面。

我想使用水果的名称作为复选框的价值

要阅读此JSON，我有以下服务：

getJSON (): Observable<JSON> {
    return this.http.get<JSON>((this.configUrl))
  }
}

在我的组件中，我有以下代码来读取获取JSON文件：

this.jsonService.getJSON().subscribe(response => {


     console.log(response.fruites);
      console.log(response.fruites[1].name);
      console.log(response.fruites.length);

      for (this.i = 0; this.i < response.fruites.length; this.i++) {


          console.log("id" + response.fruites[this.i  ].id);
          console.log("name" + response.fruites[this.i].name);
          console.log("selected" + response.fruites[this.i].selected);


        }

})

在浏览器中我可以看到它有效，而在我正在运行ng服务的消费者中我看到以下错误：

src / app / components / home / home.component.ts（221,41）：错误TS2339：“JSON”类型中不存在属性'fruites'。

另一件事是我无法将其推送到数组，我使用下面的代码：

this.jsonArray.push(response.fruites[this.i].name )

AND

this.jsonArray.push(response.fruites)

AND

this.jsonArray.push(response)

所有的回复都是未定义的或根本没有任何东西！

请就这些问题咨询我。

Answer 1

试试吧

response.data.fruites

或

{{1}}

Answer 2

我相信您获得的有效负载可以很容易地完成：

this.jsonService.getJSON().subscribe(response => {
        for(const i of response.fruites) {    // Iterate over the list
           console.log('Data set coming as - ', i);
           console.log('ID - ', i.id);
           console.log('Name - ', i.name);
           console.log('Selected - ', i.selected);
        }
array=[]; var item;
response.fruites.map((item) =>{  array.push(item.name)});
console.log('Array with name', array);`

Answer 3

在这个post中，我已经完整地回答了我如何完成所有事情，这也与我提出的这个问题有关。

获取JSON并将其添加到数组中

3 个答案: