title: How to iterate through JSON response from fetch() then add it to chart data?
body: <p>I'm trying to get a JSON response from an API and then add it to a Chart.js chart.
  This is the JS code for the Vue component</p>
  
  <pre><code>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)
          }
        }
    }
  </code></pre>
  
  <p>But I get the error </p>
  
  <p><code>Chart.vue?36ee:38 TypeError: annual[Symbol.iterator] is not a function</code></p>
  
  <p>Is there any other way to add the data to the chart?</p>