Intenté alcanzar un elemento en un objeto dentro de una matriz que es un elemento en un objeto dentro de una matriz. Mira el código debajo. El tercerElementInObject tiene una longitud variable. Mi plan es hacer un elemento de lista con cada objeto en mainArray. No lo he hecho con los elementos de la matriz thirdElementInObject. ¿Alguien sabe cómo puedo hacer esto?
mainArray = [ {firstElementInObject: xyz, secondElementInObject: abc, thirdElementInObject: [ {name: zzz, age: aaa, }, {name: cde, age: 123, }, ], }, {firstElementInObject: xyz, secondElementInObject: abc, thirdElementInObject: [ {name: xxx, age: yyy, }, {name: abc, age: def, }, {name: abc, age: def, } ], } ] const parentElementDash = document.querySelector('.mainArrayUl'); const updateHTML = function () { if (mainArray.length > 0) { let result = mainArray.map(element => { return ` <li> <p>${element.firstElementInObject}</p> <p>${element.secondElementInObject}</p> /* Here I want to write the name in the thirdElementInObject. */ </li>` }); parentElementDash.innerHTML = result.join(''); } } updateHTML();.map() ..join() para convertir la matriz en una cadena e insertarla en el HTML.Prueba esto
var mainArray = [ { firstElementInObject: 'xyz', secondElementInObject: 'abc', thirdElementInObject: [ {name: 'zzz', age: 'aaa',}, {name: 'cde', age: 123,}, ], }, { firstElementInObject: 'xyz', secondElementInObject: 'abc', thirdElementInObject: [ {name: 'xxx', age: 'yyy',}, {name: 'abc', age: 'def',}, {name: 'abc', age: 'def',} ], } ] const parentElementDash = document.querySelector('.mainArrayUl'); const updateHTML = function () { if (mainArray.length > 0) { let result = mainArray.map(element => { return ` <li> <p>${element.firstElementInObject}</p> <p>${element.secondElementInObject}</p> <p>${element.thirdElementInObject.map(({name}) => name).join(', ')}</p> </li>` }); parentElementDash.innerHTML = result.join(''); } } updateHTML(); <ul class="mainArrayUl"></ul>