CODEWITHSUNDEEP
javascriptjsonvue.js
Nivyan
Nivyan

Reputation: 139

V-for with an array inside it

I'm iterating through a JSON array, but have problems with getting data from another array within it.

{
  "someData": [
     {
        "name": "a Name of some kind",
           "contactInfo": [
           {
              "phone": "88888888",
              "address": "Heaven, 666"
           }
     }
  ]
}

But I can't wrap my head around getting both name and phone in this data as an example.

I'd assume

<li v-for="(data, index) in importedData.someData" :key="index">
   {{data.name}}
   {{data.contactInfo.phone}}
</li>

or similar would get it, but I simply get the object instead.

Upvotes: 0

Views: 32

Answers (1)

Radu Diță
Radu Diță

Reputation: 14201

contactInfo is an array, not an object, you need to access the first element most likely.

<li v-for="(data, index) in importedData.someData" :key="index">
   {{data.name}}
   {{data.contactInfo[0].phone}}
</li>

If you want to get all phone numbers, you should use another v-for

<li v-for="(data, index) in importedData.someData" :key="index">
   {{data.name}}
   <span v-for="(contactInfo, ciIndex) in data.contactInfo">
    {{contactInfo.phone}}
   </span>
</li>

Upvotes: 1

Related Questions