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>