Display a specific element of an array after a query

Question

I'm in trouble to display a specific element in an array with vuejs 2. After this query I obtain an array with 20 elements :

this.$http.jsonp('https://api.instagram.com/v1/users/self/media/recent/?access_token=mytoken').then((response) => {
  this.photos = response.body.data
}, (err) => {
  console.log(err)
})

If I try to display the content of {{ photos }}, {{ photos[0] }} it works but if I try to display the content of a key like this {{ photos[0].id }} it does not work and it's the same for all the others keys. The console return this error :

Error when rendering component

Is this the complete error? Can you add photos object in the question itself. — Saurabh
– Saurabh, Commented Jan 16, 2017 at 5:41

David Jones · Accepted Answer · 2017-01-16 07:04:39Z

3

The component renders for the first time before the AJAX request has completed. Assuming you initialize photos = [] in the data function, there will be an empty array when the component is first rendered. At this point, photos[0] is undefined and photos[0].id causes a TypeError.

To get round this, use v-if to only render when the objects you are trying to access exist.

<!-- only render if photos contains at least 1 item -->
<div v-if="photos.length">
  {{photos[0].id}}
</div>

answered Jan 16, 2017 at 7:04

David Jones

3,4122 gold badges20 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Display a specific element of an array after a query

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