Access nested objects in API using vue resource

Question

I'm just starting out with vue resource (and ajax in general) and I'm having trouble listing an array that's nested in my API.

If this is my sample JSON:

{
  "item1" : "data",
  "item2" : 1234,
  "item3" : 5678,
  "item6" : "data",
  "item7" : [ {
    "id" : 0,
    "data2" : "testdata",
    "data3" : "testdata",
  },{
    "id" : 2,
    "data2" : "testdata",
    "data3" : "testdata",
  },{
    "id" : 3,
    "data2" : "testdata",
    "data3" : "testdata",
  } ]
}

I want to pass the item7 array through a list in my html like this:

<div id="app">
  <ul v-for="item in items">
      <li>{{ item.data2 }} {{ item.data3 }}</li>
  </ul>
</div>

Here's my js:

window.onload = function() {

  new Vue({
    el: '#app',
    data: {
      items: {}
    },
    ready: function () {
       this.$http.get('/api/items', function(data) {
        console.log(data);
        this.items = data.item7[];
       });
    },

  });

};

Naturally this returns nothing, I'm not sure how to loop the array through this.items = data.item7[]; with vue resource.

Jeff · Accepted Answer · 2016-07-29 15:47:18Z

1

You just need to write this.items = data.item7, no need for [].

You also need to bind this to the function. When you're in the callback from the HTTP request, this refers to something else. So you can use .bind(this) like so:

this.$http.get('/api/items', function(data) {
    this.items = data.item7;
 }.bind(this));

Lastly, you should instantiate items as an array if it is going to be an array:

data: {
  items: []
},

answered Jul 29, 2016 at 15:47

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

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

Collectives™ on Stack Overflow

Access nested objects in API using vue resource

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related