CODEWITHSUNDEEP
javascripttypescriptvue.jsobjectv-for
Calippo
Calippo

Reputation: 107

Vue - Loop through an array with nested objects

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? :)

Upvotes: 1

Views: 421

Answers (3)

Mino mnz
Mino mnz

Reputation: 181

Syntax problem

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

Upvotes: 0

Christopher Shroba
Christopher Shroba

Reputation: 7544

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>

Upvotes: 1

CascadiaJS
CascadiaJS

Reputation: 2495

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"}")
}

Upvotes: 0

Related Questions