Iterate over JSON and print values in Vue.js

Question

I am quite new to Vue and am attempting to retrieve a JSON response from an API and then print this on my page.

This is what I have so far:

<body>
    <div id="mystats" class="container">
    <h1>My Top Tracks</h1>

    <ol>
        <li v-for="track in tracks">@{{ track.name }}</li>
    </ol>
    <pre>@{{ tracks|json }}</pre>
    <button v-on:click="fetchStats">Fetch stats</button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>

    <script type="text/javascript">
        $vue = new Vue({
            el: '#mystats',

            data: {

                tracks: [],

            },

            methods: {
                fetchStats: function()
                {
                   this.$http.get('/mystatsdata', {params:  {type: 'tracks'}}).then((response) => {
                    this.tracks.push(response.body);
                    console.log(this.tracks.name);
                  }, (response) => {
                    // error callback
                  }); 
                }
            }
        })
    </script>
</body>

Below is the response I am getting back:

[
  [
    {
      "name": "Falling Away - Acoustic (Bonus Track)",
      "track_number": 8,
      "type": "track",
    }
  ]
]

The issue is that the:

<ol>
    <li v-for="track in tracks">@{{ track.name }}</li>
</ol>

is not printing out the track name.

There's no error in my console, and so being a little new to Javascript and Vue.js I'm not really sure where I am going wrong.

How do I get the name to display?

Edit

Here is the response with more than one entry (limited to 2 currently):

[
  [
    {
      "name": "Falling Away - Acoustic (Bonus Track)",
      "track_number": 8,
      "type": "track",
    },
    {
      "name": "Perfect Strangers",
      "track_number": 1,
      "type": "track",
    }
  ]
]

You are receiving an array of arrays of objects. Could you show how it returns two result? — craig_h
– craig_h, Commented Nov 29, 2016 at 12:22
@craig_h that worked, however only returned one result, when it should return two. i.e there are two tracks in the response and only the first gets displayed. — James
– James, Commented Nov 29, 2016 at 12:30
If you swap out the production version (vue.min.js) for the development version (vue.js) it might give you a warning or error message. — user6939352
– user6939352, Commented Nov 29, 2016 at 12:31
Here's a JSFiddle to show you what you should be aiming for: jsfiddle.net/kn1arbem — craig_h
– craig_h, Commented Nov 29, 2016 at 12:33

ecthiender · Accepted Answer · 2016-11-29 12:32:53Z

11

The response that you are getting back is an array containing another array - which in turn contains the actual objects representing your tracks.

So inside: <li v-for="track in tracks">@{{ track.name }}</li> , the track refers to the inside array and not to each object.

For quick-fix, you can change your code to: <li v-for="track in tracks[0]">@{{ track.name }}</li> and try.

But the proper fix would be to fix the backend, to return the result as a single array of objects.

answered Nov 29, 2016 at 12:32

ecthiender

5033 silver badges16 bronze badges

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

2 Comments

James Over a year ago

Thanks, using v-for="track in tracks[0]" has worked. It looks like the Spotify API I am querying returns an array with all the tracks, and then when I am using this.tracks.push(response.body); it is wrapping it inside the pre-defined tracks array. Is there any way to get around this?

ecthiender Over a year ago

Instead of doing this.tracks.push(response.body), as the response is the list of tracks, why not use this.tracks = response.body ?

louiszawadzki · Accepted Answer · 2016-11-29 12:34:03Z

3

As @craig_h suggested it looks like you're receiving an array of array of objects instead of an array of objects.

I would recommand you to send a better formatted json like this:

[
  {
    "name": "Falling Away - Acoustic (Bonus Track)",
    "track_number": 8,
    "type": "track",
  },
  {
    "name": "Falling Away2 - Acoustic (Bonus Track)",
    "track_number": 9
    "type": "track",
  }
]

If you don't have access to the backend, using this.tracks.push(response.body[0]) in your fetchStats method should do the trick.

answered Nov 29, 2016 at 12:34

louiszawadzki

311 bronze badge

2 Comments

James Over a year ago

Using this.tracks.push(response.body[0]) cuts out the second result?

louiszawadzki Over a year ago

If response.body is the json you provided, you should get exactly the json in my answer with response.body[0], so the second result should be there ;)

Collectives™ on Stack Overflow

Iterate over JSON and print values in Vue.js

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related