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>

webbist · Accepted Answer · 2019-12-04 10:17:57Z

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>

edited Dec 4, 2019 at 10:17

answered Dec 4, 2019 at 9:51

webbist

4564 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Data Mastery Over a year ago

Thank you for your answer, that already helps a lot. I updated my question to show you where I trigger my GET Request. Can you tell me how to update that to display the data in the chart?

Data Mastery Over a year ago

Not far away I guess, thank you! One issue if still left: Result is the observer Object, not the acutal array [ob: Observer] 0: Array(1) 0: 1: 71.2833 2: 7.925 3: 53.1 4: 8.05

webbist Over a year ago

Not sure what that is given the question you've asked if my answer resolved that issue I'd mark it as completed and accepted and ask another if it's related to a specific API you're getting data from. I'd need to know more information to help resolve.

ppotaczek · Accepted Answer · 2019-12-04 12:17:34Z

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

Collectives™ on Stack Overflow

VueJS App put data from GET request inside an array

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related