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

Answer 1

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