Vue - Loop through an array with nested objects

Question

I'm fetching a list that I'm trying to loop through that has an object inside. I'm using vue and the array looks like this:

companies: [
  name: "company1"
  id: 1
  type: "finance"
  additionalData: "{"funder":"blabla","idType":5,"number":"2"}"
]

My problem is accessing the different ones inside the additionalData.

This is how far I've come:

        <div
            v-for="(company, idx) in companies"
            :key="idx"
        >
          <p class="font-weight-bold text-h6"> {{ company.name }} </p>
          <p class="font-weight-bold"> {{ company.additionalData.funder }} </p>
        </div>

This doesn't work and I've tried a loop inside the loop aswell. When I only print out {{ company.additionalData }} I get the whole object. Can it have something to do with that the object is inside a string? Could I do a computed or something to figure this out or? :)

I think you have a few syntax errors wrong with your code. you say that companies is an array, but it contains keys and values separated by colons, which is not valid inside an array, so you should have companies: { ... } rather than companies: [ ... ]. Also, the line with additionalData doesn't make sense. you have strings like "{" directly next to variables like funder and blabla. I'm wondering if this was just an issue with how you copy pasted your code into StackOverflow? — Christopher Shroba, Commented Jan 11, 2022 at 19:54

Christopher Shroba · Accepted Answer · 2022-01-11 19:56:04Z

1

It looks like additionalData is a string containing JSON, so try converting the string to an object. Something like this should work:

<p class="font-weight-bold"> {{ JSON.parse(company.additionalData).funder }} </p>

answered Jan 11, 2022 at 19:56

Christopher Shroba

7,6148 gold badges47 silver badges75 bronze badges

Add a comment |

CascadiaJS · Accepted Answer · 2022-01-11 19:55:54Z

0

Yes, you're right, you can't access json properties with dot notation in html. You can fix that with JSON.parse, which will turn your JSON object into a JavaScript object that you can access the properties of in your template.

companies: {
  name: "company1"
  id: 1
  type: "finance"
  additionalData: JSON.parse("{"funder":"blabla","idType":5,"number":"2"}")
}

answered Jan 11, 2022 at 19:55

CascadiaJS

2,5152 gold badges28 silver badges47 bronze badges

Add a comment |

Mino mnz · Accepted Answer · 2022-01-12 06:23:24Z

0

Syntax problem

companies: [
  name: "company1"
  id: 1
  type: "finance"
  additionalData: {
    "funder": "blabla",
    "idType": 5,
    "number":"2"
  }
]

answered Jan 12, 2022 at 6:23

Mino mnz

1811 silver badge4 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Vue - Loop through an array with nested objects

3 Answers 3

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Related