在 Angular 2 中访问 JSON 数据

Question

>我有一个以下结构的模型：

export class ExampleData{
    id: string;
    url: string;
}

我正在调用一个服务，它返回以下 JSON：

[
  {
    "id": "abc",
    "url": "/path/to/folder"
  },
  {
    "id": "def",
    "url": "/path/to/folder"
  }
]

调用的函数如下所示：

getExampleData(): Observable<Array<ExampleData>> {
    let headers = new Headers({'Accept': 'application/json; charset=utf-8'});
    let options = new RequestOptions({headers: headers});
    return this.http.get(Endpoint.Data, API_CONFIG.urls.urlToService, options)
        .do(console.log).map((response) => response.json());
}

在我的浏览器控制台中，服务调用打印结果，并且工作正常，我看到返回的 json。但是当我想访问内容时，它不起作用。他甚至没有进入forEach，因为它是空的。

forEach(this.exampleData, function (data) {
       alert(data.id);
    });

Answer 1

在组件中，您必须subscribe()可观察量。

所以它应该看起来像这样。

//whatever your component is, somewhere ngOnInit or Onchanges
this.myService.getExampleData().subscribe(d => this.data = d);

如果您打算仅在 HTML 图层上显示async也可以使用管道。

Answer 2

如果您提供组件代码段会更好。你可以试试这个：

 getExampleData():  Observable<Response> {
    //options & headers...
    return this.http.get(Endpoint.Data, API_CONFIG.urls.urlToService, options)
        .map((response: Response) => response.json());
}

然后在组件上：

 exampleData: ExampleData[];
 this.dataService.getExampleData()
                 .subscribe(data => {
                  this.exampleData = data;
                  console.log(this.exampleData);
                  //Iterate through you data here
                 forEach(this.exampleData, function (data) {
                 alert(data.id);
                 });
            },
            error => {
       //Error
        }
      }