(フェッチからのJSONレスポンスを反復処理する方法)、データをグラフ化して、それを追加しますか?

mismaah:

私は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は、ループのいくつかの種類があります。ほとんどのannualオブジェクトは、カスタムイテレータなしで、あなたがこのメッセージを得ている理由です。

1)for ... ofをループするためのものである反復可能オブジェクトようなアレイとイテレータが定義されたカスタムを持っている他のアレイ状構造、又はオブジェクトとして。

2)for ... inオブジェクトキー(と配列のインデックス)をループするためのものです。

使用してみてくださいfor ... in代わりに:

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

おすすめ

転載: http://43.154.161.224:23101/article/api/json?id=30928&siteId=1