DIsplay data from JSON API using vuejs and axios

Question

Below is my JS and HTML code for a Vue.js application I'm building.

The data returns fine but I'm unable to display it on the front.

Any help would be appreciated.

data() {
    return {
      overview: this.getOverview()
    }

  },
  methods: {
    getOverview() {
      return axios.get('http://localhost:8000/v1/overview')
        .then(response => {
          this.results = response.data
          console.log('results data', this.results)
        })
        .catch(function(error) {
          console.log(error);
        })
    }
  }

<tr v-for="overview in overview">
  <td>
    {{overview.id}}
  </td>

  <td></td>
  <td class="text-right">
    {{overview.schools}}
  </td>
  <td class="text-right">
    {{overview.primary}}
  </td>
  <td class="text-right">
    {{overview.secondary}}
  </td>

</tr>

JSON data

{"schools":545,"counsellors":4,"reports":13,"sub_regions":[{"id":1,"name":"Barima-Waini","schools":45,"primary":42,"secondary":3},{"id":2,"name":"Pomeroon-Supenaam","schools":45,"primary":37,"secondary":8},{"id":3,"name":"Essequibo Islands-West Demerara","schools":72,"primary":59,"secondary":13},{"id":4,"name":"Georgetown","schools":69,"primary":54,"secondary":15},{"id":5,"name":"Outside Georgetown","schools":62,"primary":31,"secondary":31},{"id":6,"name":"Mahaica-Berbice","schools":39,"primary":32,"secondary":7},{"id":7,"name":"East Berbice-Corentyne","schools":71,"primary":54,"secondary":17},{"id":8,"name":"Cuyuni-Mazaruni","schools":31,"primary":28,"secondary":3},{"id":9,"name":"Potaro-Siparuni","schools":22,"primary":20,"secondary":2},{"id":10,"name":"Upper Takutu-Upper Essequibo","schools":49,"primary":45,"secondary":4},{"id":11,"name":"Upper Demerara-Upper Berbice","schools":40,"primary":32,"secondary":8}]}

I expect you mean this.overview = response.data. Also, you should not name your iterator the same as what you are iterating; overview in overview will not work. — Bert
– Bert, Commented Nov 27, 2017 at 0:57
@AluanHaddad please clarify. Should there be another return somewhere in the code? This is my first time with Vue — carlhandy
– carlhandy, Commented Nov 27, 2017 at 0:59
Never really used vue myself, but you databindings reference something a property named overview which is a Promise that will inevitably resolve with undefined if it resolves. — Aluan Haddad
– Aluan Haddad, Commented Nov 27, 2017 at 1:01

Bert · Accepted Answer · 2017-11-27 01:44:45Z

2

Disclaimer: I've never really used Vue myself

The problem is that you are databinding in your view to a view model property named overview. The value of overview is a Promise that will inevitably resolve with undefined, if it resolves, because the final .then in your promise chain does not return a value:

return axios.get('http://localhost:8000/v1/overview')
  .then(response => {
     this.results = response.data;
     console.log('results data', this.results);
   })
   .catch(function(error) {
     console.log(error);
   });

As you can see, we are assigning the response from the API call to a result property but that is not what we are binding to. I believe that, as Bert suggests, you need assign to this.overview instead of this.result if possibly, I would prefer to simply return the resolved value in the promise chain.

Speaking of promise chains, since you are using Vue, you are transpiling, since you are transpiling, you should leverage async/await for superior readability.

Consider writing code such as

async getOverview() {
  try {
    const {data:{json:{sub_regions}}} = await axios.get('http://localhost:8000/v1/overview');
    console.log('results data', sub_regions);
    this.overview = sub_regions;
  }
  catch (error) {
    console.log(error);
    return [];
  }
}

Thank to Bert's link and helpful analysis, I have updated the answer to reflect a common Vue pattern

You will end up with something like this

new Vue({
  el: "#app",
  data() {
    return {
      overview: []
    }

  },
  methods: {
    async getOverview() {
      try {
        const {data:{json:{sub_regions}}} = await axios.get('http://localhost:8000/v1/overview');
        console.log('results data', sub_regions);
        this.overview = sub_regions;
      }
      catch (error) {
        console.log(error);
        return [];
      }
    }
  },
  created(){
    this.getOverview()
  }
})

edited Nov 27, 2017 at 1:44

Bert

82.6k17 gold badges205 silver badges166 bronze badges

answered Nov 27, 2017 at 1:17

Aluan Haddad

32.1k10 gold badges83 silver badges95 bronze badges

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

7 Comments

Bert Over a year ago

I hadn't noticed that OP was assigning the results of getOverview to overview. This is how it would be done typically with Vue: codepen.io/Kradek/pen/VrBEpJ?editors=1010

Aluan Haddad Over a year ago

@Bert ah I see. That is more familiar to me actually. I was sort of hoping that maybe Vue supported something more declarative, where the initial value could start out as a promise-in-flight, but that makes sense.

Bert Over a year ago

I recall Angular doing that, but yeah, Vue doesn't at the moment.

Bert Over a year ago

Your update is most of the way there; the only remaining issue is I don't understand whether OP wants just the sub_regions portion of the JSON response (which is what he appears to be iterating in the template) or to store the entire response, and just iterate over the sub regions.

carlhandy Over a year ago

@Bert store the entire response and iterate over the sub regions

|

Collectives™ on Stack Overflow

DIsplay data from JSON API using vuejs and axios

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related