Exploring the Power of v-for in Nested Objects with Vue

Question

Exploring the Power of v-for in Nested Objects with Vue

I currently have a dataset in the following structure:

itemlist : {
  "dates": [
    "2019-03-15", 
    "2019-04-01", 
    "2019-05-15"
  ], 
  "id": [
    "arn21", 
    "3sa4a", 
    "wqa99"
  ], 
  "price": [
    22, 
    10, 
    31
  ]
}

My goal is to iterate through this object using v-for within my component, where each index within the nested arrays represents one observation. So dates[0], id[0], and price[0] correspond to the same item; dates[1], id[1], price[1] represent the second item, and so on.

Therefore, I believe I need to transform it into the following format, although I am uncertain:

0 : {
dates: "2019-03-15", 
id: "arn21", 
price: 22,
}
1:{
dates: "2019-04-01", 
id: "3sa4a", 
price: 10,
}
2:...

This is how I'm passing the data to the component:

<tempc v-for="i in itemlist" :key="i.id" :price="i.price" :dates="i.dates"></temp>

Unfortunately, this approach does not work for the original dataset.

javascript vue.js vuejs2

Answer 1

Answer №1

If you want to streamline the process, consider creating a computed property:

Vue.component('my-component', {
  template: '#my-component',
  data() {
    return {
      itemlist: {
        "dates": [
          "2019-03-15",
          "2019-04-01",
          "2019-05-15"
        ],
        "id": [
          "arn21",
          "3sa4a",
          "wqa99"
        ],
        "price": [
          22,
          10,
          31
        ]
      }
    };
  },
  computed: {
    // It is assumed that these arrays will always be of equal length
    mergedList() {
      return this.itemlist.dates.map((dates, i) => {
        return {
          dates,
          id: this.itemlist.id[i],
          price: this.itemlist.price[i]
        };
      });
    }
  }
});

var vm = new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>

<div id="app">
  <my-component></my-component>
</div>

<template id="my-component">
  <ul>
    <li v-for="i in mergedList" :key="i.id" :price="i.price" :dates="i.dates">
      {{i.id}} - ${{i.price}} ({{i.dates}})
    </li>
  </ul>
</template>

Answer 2

If you want to streamline the process, consider creating a computed property:

Vue.component('my-component', {
  template: '#my-component',
  data() {
    return {
      itemlist: {
        "dates": [
          "2019-03-15",
          "2019-04-01",
          "2019-05-15"
        ],
        "id": [
          "arn21",
          "3sa4a",
          "wqa99"
        ],
        "price": [
          22,
          10,
          31
        ]
      }
    };
  },
  computed: {
    // It is assumed that these arrays will always be of equal length
    mergedList() {
      return this.itemlist.dates.map((dates, i) => {
        return {
          dates,
          id: this.itemlist.id[i],
          price: this.itemlist.price[i]
        };
      });
    }
  }
});

var vm = new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>

<div id="app">
  <my-component></my-component>
</div>

<template id="my-component">
  <ul>
    <li v-for="i in mergedList" :key="i.id" :price="i.price" :dates="i.dates">
      {{i.id}} - ${{i.price}} ({{i.dates}})
    </li>
  </ul>
</template>

Exploring the Power of v-for in Nested Objects with Vue

Answer №1

Similar questions

Discover the ultimate solution to disable JSHint error in the amazing Webstorm

Tips for delaying the rendering of a directive in AngularJS until the data from a tsv file has been fully loaded

What is the best way to eliminate a specific element from a JavaScript array?

The call stack is overflowing due to excessive use of async.queue, causing a

Achieving left alignment for Material-UI Radio buttons: Float them left

Injecting multiple instances of an abstract service in Angular can be achieved using the following techniques

javascript utilizing underscorejs to categorize and aggregate information

How to Transfer Data from SuperAgent Library Outside the .then() Block?

What is the best way to execute a method in a component for each iteration in an *ngFor loop in Angular 2

A beginner's guide to crafting a knex query with MySQL language

Can one extract the content from a secure message received from a Telegram bot?

Finding the value of a radio button dynamically created by jQuery

Adjusting the speed of Vuetify transitions: A guide on setting the perfect transition speed

Troubleshooting JavaScript Oscilloscope: resolving audio playback problems

Nuxt: Encountered an unexpected < symbol

What is the process for displaying the attributes of a custom object in Typescript?

Utilize the Tab feature effectively in Impress.Js

Hold on for the completion of Angular's DOM update

Redirect middleware for Next.js

Invoking an asynchronous method of the superclass from within an asynchronous method in the subclass