如何遍历 fetch() 的 JSON 响应，然后将其添加到图表数据中？答案

【问题标题】：How to iterate through JSON response from fetch() then add it to chart data?如何遍历 fetch() 的 JSON 响应，然后将其添加到图表数据中？
【发布时间】：2020-06-17 15:57:07
【问题描述】：

我正在尝试从 API 获取 JSON 响应，然后将其添加到 Chart.js 图表。这是Vue组件的JS代码

import LineChart from './LineChart.js'
  export default {
      name: 'Chart',
      components: LineChart,
      data () {
        return {
          loaded: false,
          stockData: {
            labels: null,
            datasets: null
          }
        }
      },
      async mounted () {
        this.loaded = false
        try{
          const response = await fetch('http://localhost/AAPL')
          const stock = await response.json()
          console.log(stock)
          let annual = stock.Earnings.Annual
          for(let i of annual){
            this.stockData.labels.push(i.date)
            this.stockData.datasets.push(i.epsActual)
          }
          this.loaded = true
        } catch (e){
          console.error(e)
        }
      }
  }

但我得到了错误

Chart.vue?36ee:38 TypeError: annual[Symbol.iterator] is not a function

还有其他方法可以将数据添加到图表中吗？

【问题讨论】：

标签： javascript json vue.js

【解决方案1】：

JavaScript 有几种类型的循环。 annual 很可能是一个没有自定义迭代器的对象，这就是您收到此消息的原因。

1) for ... of 用于循环遍历 iterable objects，例如数组和其他类似数组的结构，或定义了自定义迭代器的对象。

2) for ... in 用于循环对象键（和数组索引）。

尝试改用for ... in：

for(let i in annual){
    this.stockData.labels.push(annual[i].date)
    this.stockData.datasets.push(annual[i].epsActual)
}

【讨论】：