首页 > 解决方案 > 错误类型错误:res.forEach 不是函数

问题描述

我有一个HTML代码,如下所示。

<div *ngIf="chart" class="col-xl-4 col-lg-6">
      <div class="card cardColor mb-3">
        <div class="card-header headColor">
          <img class="img-fluid" src="../../../assets/images/chart-bars-box-16-white.png" /> &nbsp;
          <b>Issue Chart</b>
        </div>
        <div class="card-body">
          <canvas id="canvas">{{ chart }}</canvas>
        </div>
      </div>
    </div>  

我有一个从中提取数据的 API。

url = 'https://api.myjson.com/bins/1dnpid';  

这是折线图的代码:

// line graph
        this.httpClient.get(this.url).subscribe((res: Data[]) => {
            res.forEach(y => {
              this.year.push(y.year);
              this.price.push(y.price);
            });
            this.chart = new Chart('canvas', {
              type: 'line',
              data: {
                labels: this.year,
                datasets: [
                  {
                    data: this.price,
                    borderColor: '#6ea204',
                    fill: false
                  }
                ]
              },
              options: {
                legend: {
                  display: false
                },
                scales: {
                  xAxes: [{
                    display: true
                  }],
                  yAxes: [{
                    display: true
                  }],
                }
              }
            });
          });  

有一个管理数据的界面:

export interface Data {
    year: String;
    price: number;
}

每当我在浏览器中运行它时,都会出现以下错误:

ERROR TypeError: res.forEach is not a function
  at SafeSubscriber._next (dashboard.component.ts:130)

可能是什么问题呢?

标签: javascriptangulartypescript

解决方案


您收到此错误是因为对象本身没有foreach方法,而数组有。

您的 API 返回一个带有results键的对象,很可能是您想要迭代的数组。

我相信你想res.results.forEach改用。


推荐阅读