How to format fetched data in Vue.js and update the vue instance

Question

I am trying to fetch a json from an api and then format it for later use in google-charts. I fetch the json-file using vue-resource and it works normally, the problem happens when I try to format the received data (update other arrays in data() with the fetched data), the vue component is not updated (the function is in created() ).

When I use a v-on:click the formating is done correctly but when I call the function from created it doesn't work. I tried Vue.set and the splice method, both didn't work.

Goal
Getting the formatData() method to run and update the idArray.

export default {
  name: 'app',
  components: {
    FirstCharts
  },
  data() {
    return {
      apiData: undefined,
      idArray: []
    }
  },
  created() {
    this.loadApi();
  },
  methods: {
    loadApi: function () {
      this.$http.get('https://api.myjson.com/######').then(this.successCallback, this.errorCallback);

    },
    successCallback: function (response) {
      this.apiData = response.data;
    },
    errorCallback: function (response) {
      this.apiData = response.data;
      this.formatData();
      this.$forceUpdate();
    },
    formatData: function () {
      for (var i = 0; i < this.apiData.resourcePlan.length; i++) {
        this.idArray.splice(i, 1, parseInt(this.apiData.resourcePlan[i].resourceID));
        Vue.set(this.idArray, i, parseInt(this.apiData.resourcePlan[i].resourceID));
      }
    }

Aside from not calling formatData() in you're successCallback, you're going to run into this scope problems with the way you're passing your methods to then(). — Phil
– Phil, Commented Aug 12, 2019 at 23:55

James South · Accepted Answer · 2019-08-12 23:40:02Z

1

it looks like you are calling formatData in the error callback, not the success callback. see if moving it into success works.

answered Aug 12, 2019 at 23:40

James South

6045 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

How to format fetched data in Vue.js and update the vue instance

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related