CODEWITHSUNDEEP
javascriptvue.jsv-for
OscarDev
OscarDev

Reputation: 977

v-for to JSON complex

Do you know how I can go through the next JSON with VUE? I do not understand how to do it since it has keys that von V-FOR can not access:

[
    {
        "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 access the id and image of each one in the first part to later be able to access the "Services".

I am dealing with V-FOR in this way:

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

But I can not even access each ID. I have made a console.log in this way and I see the data but I do not understand how to do with VUE: console.log(this.services[0].Lavandería.id);

Upvotes: 2

Views: 8094

Answers (3)

Gabriele Di Simone
Gabriele Di Simone

Reputation: 156

You can iterate also an object:

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

JsFiddle

If you have only one object in the array, use directly services[0] instead of the first v-for.

Upvotes: 6

Cloud Soh Jun Fu
Cloud Soh Jun Fu

Reputation: 1512

You need to understand your JSON structure.

[
  {// first v-for (1st loop)
     'a': { // second v-for (1st loop)
       id
     },
     'b': { // second v-for (2nd loop)
       id
     }
  },
  {// first v-for (2nd loop)
     'a': { // second v-for (1st loop)
       id
     },
     'b': { // second v-for (2nd 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>

Upvotes: 1

Potato Salad
Potato Salad

Reputation: 4650

If in case you only want to access all services from each object and just display them linearly, you can map the service array into a flat array.

Using your data as a sample -- which is an array containing an object with multiple root 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].Servicios
               }).reduce((acc, val) => acc.concat(val));
        }

    }
})

Upvotes: 0

Related Questions