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

Is there a way to eliminate the shadow effect from the md-steppers tag in vue-material?

Issue: A file that has been uploaded completely ignores the req.on() method in NodeJS

Encountering a 500 internal server error while trying to submit a form via AJAX and

Learn how to deactivate the pause button with just one click and re-enable it once the popup appears using Angular2 and Typescript

Importing models in SceneJS does not function properly with Internet Explorer

Is it possible to have SVG animation triggered by scrolling?

Multiple ngFor loops causing only the final item to be displayed in the inner loop

Tips for accessing arrayList data within a loop in JavaScript and displaying it in an HTML <c: forEach> tag

Show various attachment file names using jQuery

getting specific article by id -- vue routing, vuex

Unable to fetch local file using ajax from a local HTML page

Switch up image origin when image reaches screen boundary

How to determine the presence of 'document' in Typecsript and NextJS

Crop images in a canvas using a customized rectangle with the help of JQuery

Using React hooks and Typescript: I was expecting to see an assignment or function call, but instead, an expression was

Encountering a Vue-router error in the browser console following the execution of the command "npm update." The specific error message received states: "Module build failed: Error: ENOENT: no such file or

Utilizing Jquery on the client side in conjunction with a Node.js server

Utilizing a switch statement for form validation

Using AXIOS and VueJs to visually represent data with a two-dimensional array

Tips for resizing a larger image to display only a specific portion in CSS (and incorporating JS if needed)