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? :)
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>
Syntax problem
companies: [
name: "company1"
id: 1
type: "finance"
additionalData: {
"funder": "blabla",
"idType": 5,
"number":"2"
}
]
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"}")
}