[Vuejs]-VueJS App put data from GET request inside an array

by

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>
👤webbist

0👍

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

👤ppotaczek

Leave a comment