VueJS App put data from GET request inside an array

Question

This is my script of a VueJS component which should show data inside a dashboard.

<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import exportingInit from "highcharts/modules/exporting";
//import stockInit from "highcharts/modules/stock";

//stockInit(Highcharts);
exportingInit(Highcharts);

export default {
  props: {
    partsdata: {
      type: Array
    }
  },
  methods: {
    fetchData() {
      this.$http.get('http://127.0.0.1:5000/data/')
      .then(response => {
        return response.json();
      }).then(data => {
        var result = JSON.parse(data) // eslint-disable-line no-console
        console.log(result.Fare) // eslint-disable-line no-console
      })
    }
  },
  components: {
    highcharts: Chart
  },

  data() {
    return {
      chartOptions: {
        series: [{
          data: [] // sample data
        }]
      }
    }
  }
};
</script>

Receiving the data from my backend works fine, but I am unable to get it into the chart. I still struggle how to work with async tasks, so I tried this and failed

this.data.push(result.Fare)

Header.vue?5e07:33 Uncaught (in promise) TypeError: Cannot read property 'push' of undefined at VueComponent.eval (Header.vue?5e07:34)

Can anyone tell me how to do this?

Update: This is my template where I trigger the Method:

<template>
  <div>
    <button @click="fetchData" class="btn-primary">Get Data</button>
    <highcharts
      :options="chartOptions"
    ></highcharts>

  </div>
</template>

Answer 1

Looking at your code if you're trying this.data.push its understandable that its telling you its undefined. To get to your data prop in your fetchData method youd have to use this.chartOptions.series[0].data.push I'm not sure where you're firing fetchData either in that code. Try move it to your created/mounted methods in the vue lifecycle, you can then change your chartOptions to a computed or watcher, setting data in the data() method and calling it in your chartOptions with this.data.

UPDATE: On click is fine for your get request if it's firing keep that the same, its where you're then setting it thats the issue. I refactored your request, if its successful when you test it response.data should give you the results you need, not sure why you need to parse it unless its returning a json blob as a string? I also added a v-if to your chart renderer, if this.data is empty then don't render. See how you get on with that.

import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import exportingInit from "highcharts/modules/exporting";
//import stockInit from "highcharts/modules/stock";

//stockInit(Highcharts);
exportingInit(Highcharts);

export default {
  props: {
    partsdata: {
      type: Array
    }
  },
  methods: {
    fetchData() {
      this.$http.get('http://127.0.0.1:5000/data/')
      .then(response => {
        this.data.push(JSON.parse(response.data))
      })
    }
  },
  watch: {
    data: function() {
     this.chartOptions.series[0].data.push(this.data)
    }

  },
  components: {
    highcharts: Chart
  },

  data() {
    return {
      data: [],
      chartOptions: {
        series: [{
          data: [] // sample data
        }]
      }
    }
  }
};
</script>

    <template>
        <div>
            <button @click="fetchData" class="btn-primary">Get Data</button>
            <highcharts if="data.length > 0" :options="chartOptions" ></highcharts>

        </div>
    </template>

Answer 2

You need to correctly get data and change chartOptions:

<template>
  <div>
    <highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
    <button @click="fetchData" class="btn-primary">Get Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    fetchData() {
      fetch('https://api.myjson.com/bins/ztyb0')
      .then(response => {
        return response.json()
      })
      .then(data => {
        this.chartOptions.series[0].data = data;
      })
    }
  },
  data() {
    return {
      chartOptions: {
        series: [{
          data: []
        }]
      }
    };
  }
};
</script>

---

Live demo: https://codesandbox.io/s/highcharts-vue-demo-05mpo

Docs: https://www.npmjs.com/package/highcharts-vue