Question

我正在尝试通过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没有被typescript

识别

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

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

Answer 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 */}
    );
}

Answer 2

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

this.results = data.Results

然后尝试通过json.Results

替换json.Results

上的this.results

Answer 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应该是您的统计数据。

如何循环通过Http Angular 2 / Typescript检索的JSON对象

3 个答案: