VUE.JS/HTTP. The problem with getting a result of http query to an html using vue.js

Question

I'm trying to make a simple app to output the API call from https://docs.coincap.io into the HTML table using Vue.js, bacause I will need to add some other features.

The problem is, that I can not get my array of objects into a page using a v-for and moustache to check variable data.

I've tried to use vue lifetime hooks to get my API call data into a variable, and different places to place my data into an object array.

<div id="app">
    TEST APPLICATION FOR COINCAP  <br>

    <div id="xhrRes">
      {{ items }}
    </div>

    <table class="table-o">
      <tr class="table-o__head">
        <th class="table-o__rank">Rank</th>
        <th>Name</th>
        <th>Price</th>
        <th>Market Cap</th>
        <th>Volume</th>
        <th>Change</th>
      </tr>
      <tr v-for="(item, index) in items">
        <td>
          {{ index }}
        </td>
        <td>
          {{ item.name }}
        </td>
        <td>
          {{ item.price }}
        </td>
        <td>
          {{ item.marketCapUsd }}
        </td>
        <td>
          {{ item.volumeUsd24Hr }}
        </td>
        <td>
          {{ item.changePercent24Hr }}
        </td>
      </tr>
    </table>
  </div>



export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      xhrUri: 'https://api.coincap.io/v2/assets?limit=15',
      xhrResult: '',
      items: []
    }
  },
  updated() {
    // this.items = this.xhrRequest();
    this.xhrRequest();
    // console.log(this.items);
  },
  methods: {
    xhrRequest: function() {
      let xhr = new XMLHttpRequest();

      xhr.open('GET', this.xhrUri, true);
      xhr.send();

      xhr.onreadystatechange = function() {
        if (xhr.readyState != 4) {
          return;
        }

        if (xhr.status === 200) {
          this.items = JSON.parse(xhr.responseText).data;
          console.log(this.items);
        } else {
          console.log('err', xhr.responseText)
        }

      }
    }
  }
}

I expected to have an array of object in {{ items }} and a filled table, but got my array of objects undefined and my table empty

Answer 1

I suggest using the created hook instead of updated .

The bigger problem is the this context inside xhr.onreadystatechange . It won't be pointing at the Vue instance. Using an arrow function is the simplest fix:

xhr.onreadystatechange = () => {

Arrow functions retain the this value from the surrounding scope.

The usual alternatives also apply, such as using bind on the function or grabbing this in a closure using const that = this . Vue automatically binds functions in the methods to the correct this value so if you introduced another method as the handler for onreadystatechange that would also work.