Estoy buscando una lista que estoy tratando de recorrer que tiene un objeto dentro. Estoy usando vue y la matriz se ve así:
companies: [ name: "company1" id: 1 type: "finance" additionalData: "{"funder":"blabla","idType":5,"number":"2"}" ]Mi problema es acceder a los diferentes dentro de AdditionalData.
Esto es lo lejos que he llegado:
<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>Esto no funciona y también probé un bucle dentro del bucle. Cuando solo imprimo {{ company.additionalData }} obtengo el objeto completo. ¿Puede tener algo que ver que el objeto esté dentro de una cadena? ¿Podría hacer un cálculo o algo para resolver esto o? :)
Parece que AdditionalData es una cadena que contiene JSON, así que intente convertir la cadena en un objeto. Algo como esto debería funcionar:
<p class="font-weight-bold"> {{ JSON.parse(company.additionalData).funder }} </p>Problema de sintaxis
companies: [ name: "company1" id: 1 type: "finance" additionalData: { "funder": "blabla", "idType": 5, "number":"2" } ]Sí, tienes razón, no puedes acceder a las propiedades json con notación de puntos en html. Puede arreglar eso con JSON.parse , que convertirá su objeto JSON en un objeto JavaScript al que puede acceder a las propiedades en su plantilla.
companies: { name: "company1" id: 1 type: "finance" additionalData: JSON.parse("{"funder":"blabla","idType":5,"number":"2"}") }