Exploring grouped data objects in Vue for iteration

My data is sourced from an API and looks like this:

{
   "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 aim to display all titles with their respective types (album or playlist).

The current code I've written only displays 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>

The output I desire is:

Album
The Best Of

Album
Made In England

Playlist
Sunset Sessions

Playlist 
Sunset Sessions

Answer №1

It appears that the issue was related to the missing second level of your data hierarchy. Take a look at the code snippet below for guidance on how it could potentially function with the provided data

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing jQuery DataTables for data fetched via Ajax calls

I am trying to showcase a specific collection of data from my MongoDb in a table using the jQuery DataTables plugin. However, I encountered an error message which says: Requested unknown parameter '0' for row0, column 0. For more information ...

Establish a minimum threshold for movements in the line graph

While working on implementing line charts for my data, I encountered an issue. My goal is to display daily order data over the past month. There are months where no orders are placed for a specific product, and then there are months with high order volumes ...

Displaying a collection of nested objects in AngularRendering a group

Is there a way to render an object of objects in Angular without converting it into an array or similar structure? I have a large object of objects and I want to avoid multiple iterations through object-to-array conversions just to loop through the array i ...

Prevent the Button from causing the Aspx Page to refresh

I've been working on a JavaScript function for my website that displays a popup when a button is clicked. However, every time I click the button, the webpage reloads causing the popup to disappear. Is there a way to prevent the page from refreshing wh ...

Exploring Vue.js: Navigating Through an Array of Images Nested Within Another Array

I am looking to showcase images stored in an array called "image" within another array named product. Essentially, if a product has an array of 3 images, I want to display all 3 images, and so on. Here is the code snippet: <template> <div c ...

Vue.js 2 maintains a collection of items

I have a method that renders a list, but when I click on one of the list items, the list disappears. I also added the showDetail() method. How can I prevent the list from disappearing? data: function () { return { show ...

Using "Datedropper" in Javascript to automatically populate values in additional input forms

I recently downloaded a "Jquery datedropper" and wanted to incorporate it into my form. Unfortunately, the javascript code does not specify a form field by an "id" or "name." Here is a picture of the problem. As a result, the datedropper is implemented in ...

JavaScript conditional substring manipulation

I am working on a function that is designed to clean strings, specifically two types of strings: "SATISFACTION._IS1.TOUTES_SITUATIONS.current_month_note" and "SATISFACTION._IS1.TOUTES_SITUATIONS.note". PS Just to clarify, TOUTES_SITUATIONS is a variable. ...

Creating customized meta tags with Vue Meta 3: A step-by-step guide

Just wanted to share my experience: "I decided to switch from vue-meta to @vueuse/head package found at npmjs.com/package/@vueuse/head and it works perfectly." I've implemented Vue Meta 3 for providing meta data to my website. The API documentation c ...

The PDO fetchAll function is not returning any values in the array, however, the rowCount function is correctly

I am working with the following code: $json = array(); $hoy = date("Y-m-d"); $consulta = "SELECT e.*,s.sal_nombre, concat(eve_titulo, ' - ',sal_nombre) as title FROM evento e, sala s where s.sal_id=e.sal_id ORDER BY id"; // establishing a d ...

Exploring Django's approach to utilizing primary keys in JSON format

As a newcomer to Django, I am working on retrieving the complete JSON document for the given data model: class Wheels(models.Model): w_name = models.CharField(max_length=255) w_weight = models.IntegerField(default=200) w_size = models.CharField(m ...

What is the best way to extract the src attribute from an image tag nested within innerHtml?

In the developer tools, navigate to console and enter: var x= document.getElementsByClassName('ad-area')[0].innerHTML; x returns: '<a href="/members/spotlight/311"><img class="block-banner" src="https://tes ...

Utilizing jQuery/AJAX to interact with database in Django

Seeking assistance as I've tried multiple times with little success. Using the tango with Django book and various online examples, but no luck. Currently designing a 'Fake News' website with Django featuring a mini-game where users vote on w ...

Could you please provide me with the option to send a list of the

Is there a way to send output via email instead of displaying it in the following div: <div id="fullCalendar" ></div> After spending a whole night searching online, I couldn't find a solution. As I'm not very familiar with jQuery pr ...

JavaScript XML Serialization: Transforming Data into Strings

When trying to consume XML in an Express server using express-xml-bodyparser, the resulting object is not very useful. This is the XML: <SubClass code="A07.0"/> <SubClass code="A07.1"/> <SubClass code="A07.2"/> <SubClass code="A07.3" ...

Tips for retrieving an object using a key in javascript or typescript when the key is unknown

Could someone help me figure out how to access the 'value' key in this object? { '-L7uAVxXmuLeBN1K-B0_': { timestamp: '18:35:18', value: 19.81 } } I'm not familiar with the first key, '-L7uAVxXmuLeBN1K-B0_', b ...

Insert a span element before an HTML input using JavaScript

On my webpage, there is an html input inside a div. Here is what it looks like: <input type="text" class="form-control" placeholder="Barcode" role="barcode"> Using JavaScript only, I am trying to add the following code into the DOM above it: <s ...

Ways to stop users from accidentally changing routes in react router v3

Currently, I am working on creating a custom hook to block users from making unintended route changes like using the back button or refreshing the page. Since I am using react-router v3, the <Prompt /> component in react router v4 is not an option fo ...

Issue with vue-template-compiler in Vue.js 3 webpack configuration

I am currently working on integrating vuejs 3 into a project that already utilizes webpack. I have been looking into using vue-loader as part of this process. After consulting the official documentation, I came across the following information: Every new ...

Using Node.js to convert a file name to a timestamp

I need to change a filename into a timestamp in my Laravel application. let test = "/2020-05-16_11-17-47_UTC_1.jpg" I attempted using split and join to replace the -, but I don't believe it's the most efficient method. The desired output should ...