Iterating through grouped object data in Vue

Question

My data comes from an API as follows

{
   "ALBUMS":[
      {
         "ID":"1",
         "TITLE":"'THE BEST OF"
      },
      {
         "ID":"2",
         "TITLE":"MADE IN ENGLAND"
      },
   ],
   "PLAYLISTS":[
      {
         "ID":"5",
         "TITLE":"SUNSET SESSIONS"
      },
       "ID":"2",
         "TITLE":"POOLSIDE SESSIONS"
      }
   ],
}

I want to list all titles and types (album or playlist).

The following that I came up with only gives me the first child from albums and playlists:

<div v-for="(item, index) in items" :key="item.id">
 <h1 class="category">{{index}}</h1>
 <h1 class="title">{{item[0].title}}</h1>

My desired result would be:

Album
The Best Of

Album
Made In England

Playlist
Sunset Sessions

Playlist 
Sunset Sessions

Stas · Accepted Answer · 2021-10-13 23:15:44Z

Looks like you were missing the second level of your data hierarchy. See the following snippet for an example of how it might work with the data you've provided

new Vue({
  el: "#app",
  data: {
   "ALBUMS":[
      {
         "ID":"1",
         "TITLE":"'THE BEST OF"
      },
      {
         "ID":"2",
         "TITLE":"MADE IN ENGLAND"
      },
   ],
   "PLAYLISTS":[
      {
         "ID":"5",
         "TITLE":"SUNSET SESSIONS"
      },
      {
         "ID":"2",
         "TITLE":"POOLSIDE SESSIONS"
      }
   ],
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <div v-for="album in ALBUMS" :key="album.ID">
   <strong>Album</strong>
     {{album.TITLE}}
   </div>
   <div v-for="playlist in PLAYLISTS" :key="playlist.ID">
     <strong>Playlist</strong>
     {{playlist.TITLE}}
   </div>
</div>

Collectives™ on Stack Overflow

Iterating through grouped object data in Vue

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