title: Iterate over JSON and print values in Vue.js
body: <p>I am quite new to Vue and am attempting to retrieve a JSON response from an API and then print this on my page.</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="mystats" class="container"&gt;
      &lt;h1&gt;My Top Tracks&lt;/h1&gt;
  
      &lt;ol&gt;
          &lt;li v-for="track in tracks"&gt;@{{ track.name }}&lt;/li&gt;
      &lt;/ol&gt;
      &lt;pre&gt;@{{ tracks|json }}&lt;/pre&gt;
      &lt;button v-on:click="fetchStats"&gt;Fetch stats&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $vue = new Vue({
              el: '#mystats',
  
              data: {
  
                  tracks: [],
  
              },
  
              methods: {
                  fetchStats: function()
                  {
                     this.$http.get('/mystatsdata', {params:  {type: 'tracks'}}).then((response) =&gt; {
                      this.tracks.push(response.body);
                      console.log(this.tracks.name);
                    }, (response) =&gt; {
                      // error callback
                    }); 
                  }
              }
          })
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Below is the response I am getting back:</p>
  
  <pre><code>[
    [
      {
        "name": "Falling Away - Acoustic (Bonus Track)",
        "track_number": 8,
        "type": "track",
      }
    ]
  ]
  </code></pre>
  
  <p>The issue is that the:</p>
  
  <pre><code>&lt;ol&gt;
      &lt;li v-for="track in tracks"&gt;@{{ track.name }}&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>is not printing out the track name.</p>
  
  <p>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.</p>
  
  <p>How do I get the name to display?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Here is the response with more than one entry (limited to 2 currently):</p>
  
  <pre><code>[
    [
      {
        "name": "Falling Away - Acoustic (Bonus Track)",
        "track_number": 8,
        "type": "track",
      },
      {
        "name": "Perfect Strangers",
        "track_number": 1,
        "type": "track",
      }
    ]
  ]
  </code></pre>