Looping through data and converting it into a JSON format can

Question

Looping through data and converting it into a JSON format can

Can anyone help me figure out how to work through this JSON data using VUE? I'm having trouble accessing keys that v-for can't seem to reach:

[
    {
        "Lavandería": {
            "id": 1,
            "name": "Lavandería",
            "img": "rinse.png",
            "Servicios": [
                {"model":"Sentra", "doors":4},
                {"model":"Maxima", "doors":4},
                {"model":"Skyline", "doors":2}
            ]
        },
        "Tintorería": {
            "id": 2,
            "name": "Tintorería",
            "img": "shirt-2.png",
            "Servicios": [
                {"model":"Sentra", "doors":4},
                {"model":"Maxima", "doors":4},
                {"model":"Skyline", "doors":2}
            ]
        },
        "Planchado": {
            "id": 3,
            "name": "Planchado",
            "img": "iron.png",
            "Servicios": [
                {"model":"Sentra", "doors":4},
                {"model":"Maxima", "doors":4},
                {"model":"Skyline", "doors":2}
            ]
        },
          "Otros": {
            "id": 4,
            "name": "Otros",
            "img": "wring.png",
            "Servicios": [
                {"model":"Sentra", "doors":4},
                {"model":"Maxima", "doors":4},
                {"model":"Skyline", "doors":2}
            ]
        }
    }
]

I need to extract the id and image of each item first, in order to access their respective "Services" data.

My attempt with v-for looks like this:

v-for="item in services" :key="item.id"

However, I am unable to even retrieve the IDs. When I console.log it as follows, I see the data but still struggle with implementing it in VUE: console.log(this.services[0].Lavandería.id);

javascript vue.js v-for

Answer 1

Answer №1

Another way to iterate is by looping through an object:

<ul v-for="(service, index) in services" :key="index">
  <li v-for="(item, key) in service" :key="key">{{key}}: {{item}}</li>
</ul>

Check out the JsFiddle example here

If there's only one object in the array, you can access it directly using services[0] instead of using a v-for loop.

Answer 2

Another way to iterate is by looping through an object:

<ul v-for="(service, index) in services" :key="index">
  <li v-for="(item, key) in service" :key="key">{{key}}: {{item}}</li>
</ul>

Check out the JsFiddle example here

If there's only one object in the array, you can access it directly using services[0] instead of using a v-for loop.

Answer 3

Answer №2

It is essential to have a clear understanding of your JSON structure.

[
  {// initial loop iteration
     'a': { // first nested loop
       id
     },
     'b': { // second nested loop
       id
     }
  },
  {// initial loop iteration
     'a': { // first nested loop
       id
     },
     'b': { // second nested loop
       id
     }
  }
]

new Vue({
  el: '#app',
  data: {
    services: [
      {
          "Lavandería": {
              "id": 1,
              "name": "Lavandería",
              "img": "rinse.png",
              "Servicios": [
                  {"model":"Sentra", "doors":4},
                  {"model":"Maxima", "doors":4},
                  {"model":"Skyline", "doors":2}
              ]
          },
          "Tintorería": {
              "id": 2,
              "name": "Tintorería",
              "img": "shirt-2.png",
              "Servicios": [
                  {"model":"Sentra", "doors":4},
                  {"model":"Maxima", "doors":4},
                  {"model":"Skyline", "doors":2}
              ]
          },
          "Planchado": {
              "id": 3,
              "name": "Planchado",
              "img": "iron.png",
              "Servicios": [
                  {"model":"Sentra", "doors":4},
                  {"model":"Maxima", "doors":4},
                  {"model":"Skyline", "doors":2}
              ]
          },
            "Otros": {
              "id": 4,
              "name": "Otros",
              "img": "wring.png",
              "Servicios": [
                  {"model":"Sentra", "doors":4},
                  {"model":"Maxima", "doors":4},
                  {"model":"Skyline", "doors":2}
              ]
          }
      }
  ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<body>
  <div id="app">
    <div v-for="(service, key) in services" :key="key">
      <div v-for="item in service" :key="item.id">
        id: {{ item.id }}<br>
        name: {{ item.name }}
      </div>
    </div>
  </div>
</body>
</html>

Answer 4

It is essential to have a clear understanding of your JSON structure.

[
  {// initial loop iteration
     'a': { // first nested loop
       id
     },
     'b': { // second nested loop
       id
     }
  },
  {// initial loop iteration
     'a': { // first nested loop
       id
     },
     'b': { // second nested loop
       id
     }
  }
]

new Vue({
  el: '#app',
  data: {
    services: [
      {
          "Lavandería": {
              "id": 1,
              "name": "Lavandería",
              "img": "rinse.png",
              "Servicios": [
                  {"model":"Sentra", "doors":4},
                  {"model":"Maxima", "doors":4},
                  {"model":"Skyline", "doors":2}
              ]
          },
          "Tintorería": {
              "id": 2,
              "name": "Tintorería",
              "img": "shirt-2.png",
              "Servicios": [
                  {"model":"Sentra", "doors":4},
                  {"model":"Maxima", "doors":4},
                  {"model":"Skyline", "doors":2}
              ]
          },
          "Planchado": {
              "id": 3,
              "name": "Planchado",
              "img": "iron.png",
              "Servicios": [
                  {"model":"Sentra", "doors":4},
                  {"model":"Maxima", "doors":4},
                  {"model":"Skyline", "doors":2}
              ]
          },
            "Otros": {
              "id": 4,
              "name": "Otros",
              "img": "wring.png",
              "Servicios": [
                  {"model":"Sentra", "doors":4},
                  {"model":"Maxima", "doors":4},
                  {"model":"Skyline", "doors":2}
              ]
          }
      }
  ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<body>
  <div id="app">
    <div v-for="(service, key) in services" :key="key">
      <div v-for="item in service" :key="item.id">
        id: {{ item.id }}<br>
        name: {{ item.name }}
      </div>
    </div>
  </div>
</body>
</html>

Answer 5

Answer №3

If you're looking to streamline access to all services within each object and display them in a linear fashion, consider transforming the service array into a flat array.

For example, if your data is an array with objects containing multiple top-level keys:

In your template

v-for="item in getServices(arr)"

In your vue model

new Vue({
    //....
    methods: {
        //...
        getServices(arr){
           let obj = arr[0];
           return [].map.call(Object.keys(arr[0]), k => {
                   return obj[k].Services
               }).reduce((acc, val) => acc.concat(val));
        }

    }
})

Answer 6

If you're looking to streamline access to all services within each object and display them in a linear fashion, consider transforming the service array into a flat array.

For example, if your data is an array with objects containing multiple top-level keys:

In your template

v-for="item in getServices(arr)"

In your vue model

new Vue({
    //....
    methods: {
        //...
        getServices(arr){
           let obj = arr[0];
           return [].map.call(Object.keys(arr[0]), k => {
                   return obj[k].Services
               }).reduce((acc, val) => acc.concat(val));
        }

    }
})

Looping through data and converting it into a JSON format can

Answer №1

Answer №2

Answer №3

Similar questions

The functionality of jQuery's appendTo method seems to be malfunctioning

Having trouble using the elementIsNotVisible method in Selenium WebDriver with JavaScript

Make the object rotate around a specified vector point

Issue: Vue.js v-model does not function correctly when used in conjunction with a v-for loop

Generating variable names dynamically in JavaScript

Confused between Javascript and PHP? Here's what you should consider!

Does Firestore arrayunion offer any kind of callback function?

ms-card malfunctioning due to data issues

I would like to exclude the item within my ng-repeat loop using ng-if

cycle through several handlebars entities

Guide to implementing a delay in JavaScript/jQuery code right after invoking an asynchronous function

The most effective method for acquiring an object through inheritance

axios displays a CORS error when interacting with a Django REST framework

"Seeking assistance with concept sharing and content transmission. In need of guidance

Enhance the functionality of your React app by making the `<Paper>` component in Material UI clickable

A guide to importing a Vue component in a JavaScript file

What is the method for sending parameters to PHP from an HTML file using AJAX?

Change a PNG file into a three.js plane by converting it into height

Leveraging Next.js to efficiently handle multiple asynchronous requests with NextResponse

Astro/Vue runs the appEntrypoint once for each component