如何遍历通过 Http Angular 2/Typescript 检索到的 JSON 对象答案

【问题标题】：How to loop through JSON object retrieved via Http Angular 2/ Typescript如何遍历通过 Http Angular 2/Typescript 检索到的 JSON 对象
【发布时间】：2017-12-08 19:00:51
【问题描述】：

我正在尝试通过 http 从我的 JSON 文件中获取一些特定数据。 JSON 看起来像这样：

[{"name":"Name1","perc":33},{"name":"Name2","perc":22},{"name":"Name3","perc":41}]

我正在尝试遍历这个检索到的对象，我正在检索它：

  this._postService.getParams(_url).subscribe(
  data => {
    this.results = data.Results
  },
  error => console.log(error),
  () => console.log('Done')
  );

getParams() 像这样获取数据

    getParams(url: string) {
    return this._http.get(url)
        .map(res => res.json());
}

我为检索的数据创建了一个接口，将其放在调用服务的同一个 .component.ts 文件中

/*Interface for Stats */
interface stats {
name: string;
percent: number;
}

我计划遍历我检索到的对象并将它们存储在本地数组中，然后循环遍历并显示它们。如何遍历组件文件中的 JSON 对象？我尝试了许多不同的 for 循环，但都失败了。

我尝试了这个但失败了，打字稿无法识别json

let list: string[] = [];
json.Results.forEach(element => {
list.push(element.Id);
});

我完全能够检索数据，因为我在控制台记录了收到的 3 个对象。

【问题讨论】：

您收到的错误是什么？ console.log(data) 或 console.log(data.results) 的第二行结果中是否提到了 json 响应？
另外，我没有看到您的代码在任何地方提到json。会不会是您使用关键字而不是 this.results？
错误只是ts: 找不到json
那么json没有被定义为参数。请改用 this.results。
你到底想在哪里循环这个？

标签： json angular http typescript

【解决方案1】：

班级统计：

export class Stats {
    name: string;
    perc: string;
    constructor(n, p) {
        this.name = n;
        this.perc = p;
    }
}

假设您的服务正常工作并返回数据，请不要更改它。

组件：

getStats(_url: string) {
    let list: Stats[] = [];
    this._postService.getParams(_url).subscribe(
        data => {
            for (let res of data.Results) {
                let stat = new Stats(res.name, res.perc);
                list.push(stat);
            }
        }, err => { /* Error handling */}
    );
}

【讨论】：

因为你需要创建这个类的实例，而你不能用一个接口来做。您可以用它替换您的界面，或者是的，您可以将其放入您选择的文件中。如果它与您的组件不在同一个文件中，请记住导入它！
是的，想通了，现在试试。
我测试了您的解决方案，但现在出现错误：TypeError: Cannot read property 'length' of undefined
很有趣，因为在我的代码中我无法读取length 属性。也许您可以通过查看错误自行解决，或者至少发布您的代码？

【解决方案2】：

您在 this.results 上分配了收到的数据

this.results = data.Results

然后尝试通过json.Results

将json.Results 替换为this.results

【讨论】：

【解决方案3】：

您应该能够简单地将数据转换到您的数组中：

getParams(url: string) {
  return this._http.get(url)
    .map(res => <stats[]> res.json());
}

然后在这段代码中：

  this._postService.getParams(_url).subscribe(
  data => {
    this.results = data.Results
  },
  error => console.log(error),
  () => console.log('Done')
  );

this.results 应该是您的统计数据数组。

【讨论】：