Reach 數組中 object 中的元素是數組中 object 中的元素

Question

我試圖到達數組內 object 中的一個元素，該數組是數組內 object 中的一個元素。 看下面的代碼。 thirdElementInObject 具有可變長度。 我的計划是用 mainArray 中的每個 object 制作列表元素。 我還沒有用 thirdElementInObject 數組中的元素實現它。 有誰知道我該怎么做？

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();

Answer 1

• 您可以使用.map()將所有名稱作為數組獲取。
• 然后，您可以使用.join()將數組轉換為字符串並將其插入到 HTML 中。

嘗試這個

 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>