How to loop through nested objects using v-for loop

Question

I'm working on some practice code that deals with card information, in which you can display the chosen card's detailed information by clicking one of the cards on the screen.

As demonstrated in the screenshots, if you choose one of the yellow cards, it displays more detailed information of the chosen card with green and blue background color.

I implemented this by using v-for loop, but the problem is that the detailed card information is a JSON object that contains multiple JSON objects inside, and I haven't been successful in displaying all of the members in non-JSON form.

I found some pages (like the link below) where some ways to loop through nested objects were discussed, but it was plain JavaScript code and I couldn't use the same strategy for v-for loop.

How to loop through a plain JavaScript object with the objects as members?

I understand the idea that you should just continue the loop in case the member is another object, not a primitive data type, but I don't know how to implement the same logic in v-for loop.

Could anyone tell me how to do it?

Here is my code.

(v-for loop part)

<div v-for="(obtainedCardInfo, index) in obtainedCardsInfo">
  <span v-if="cardBtnChosen && card.id == selectedCard && obtainedCardInfo.id == selectedCard">                                 
    <span class="cardInfo">DETAILED CARD INFO:</span>  
      <div class="cardInfoDisplay">
        <div v-for="(detailedInfo,index) in obtainedCardInfo" :key="index"> 
          <p v-if="obtainedCardInfo[index]"> {{index}} : {{obtainedCardInfo[index]}} </p>
          <p v-else> {{index}} : NULL </p>
        </div>
      </div> <br>
  </span> 
</div>

and the output for my current code.

DETAILED CARD INFO:
accountId : 3917674

id : 3918534

customerId : 998774

cardRole : MAIN

cardStatus : CARD_OK

truncatedCardNumber : 524804______9042

cardTemplate : MC_CARD

cardAddress : NULL

usageLimits : [ { "code": "WEEKLY", "values": null }, { "code": "DAILY", "values": [ { "code": "ATM", "singleAmount": 200, "count": 3, "sumAmount": 300 } ] }, { "code": "MONTHLY", "values": [ { "code": "ATM", "singleAmount": null, "count": 1000, "sumAmount": 1000000 } ] } ]

expiration : { "year": 2022, "month": 6 }

pinAddress : NULL

regionAndEcommBlocking : { "ecomm": false, "africa": false, "asia": false, "europe": false, "home": false, "northAmerica": false, "oceania": false, "southAmerica": false }

So, your problem is, that `obtainedCardInfo` is not an array where you can loop over? You can solve this e.g. by calling a method which converts your object to the desired form (`
`). A better way would be to pass the object to a new component as a prop. There, you can create a computed property which converts the object into a loopable structure. Or can you go into more detail, where exactly the problem lays? — ssc-hrep3, Jul 23 '19 at 14:27
The problem is that ```obtainedCardInfo``` is just one of the objects in the ```obtainedCardsInfo``` (notice there is 's' after 'Card') array. If you want to get ```obtainedCardInfo``` 's data by computed property, you have to specify which index of ```obtainedCardsInfo``` array you want it from. But I'm not sure how to do it. — Sean2014, Jul 24 '19 at 08:03
If you use another component, you can pass a single object to the component as a prop within a v-for loop. The child component then only receives one object instead of the whole array. And it then can have a computed property. There are then multiple of those child components with different prop data. Example: `
` You can then define a computed property in `child-component`. — ssc-hrep3, Jul 24 '19 at 11:20
I'm currently trying to do that, but here comes another problem. https://stackoverflow.com/questions/57198880/passing-an-entire-object-via-props-not-working-in-vue-js-while-passing-a-single — Sean2014, Jul 25 '19 at 09:44
I'm glad you could solve the problem (in the other question) — ssc-hrep3, Jul 25 '19 at 11:49

score 0 · Answer 1 · answered Jul 23 '19 at 16:31

The v-for simply iterate through the array or the object keys.

v-for iterates through each element in the array

v-for also iterates through the keys in the object

You should also move your logic to a computed method

<template>
<p v-for:"item, index in arr" />
     {{ item  }}
     {{ index }}
<p v-for:"item, key in obj" />
     {{ item  }}
     {{  key  }}
<br />
</template>
<script>
export default {
    data() {
       return {
           arr:[1,2,3,4,5],
           obj: { 1: 'a', 2: 'b', 3: 'c', 4: 'd', 5: 'e' }
        }
    },
    computed: {
        // do computation here
        doSomething() {
        }
    }
}
</script>

Could you tell me which part of the logic that I demonstrated in the above code should be moved to the computed? — Sean2014, Jul 24 '19 at 08:13

How to loop through nested objects using v-for loop

1 Answers1