我试图找到数组中对象中的一个元素,它是数组中对象中的一个元素.看看下面的代码.thirdElementInObject的长度可变.我的计划是让列表元素包含main数组中的每个对象.我还没有使用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();

推荐答案

  • 使用.map()可以将所有名称作为一个array.
  • 然后可以使用.join()将数组转换为字符串并插入

试试这个

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>

Javascript相关问答推荐

回归函数不会迭代到foreach中的下一个元素

React Hooks中useState的同步问题

是否有方法在OpenWeatherMap API中获取过go 的降水数据?

使用useup时,React-Redux无法找到Redux上下文值

Chart.js V4切换图表中的每个条,同时每个条下有不同的标签.怎么做?

格式值未保存在redux持久切片中

将状态向下传递给映射的子元素

如何找出摆线表面上y与x相交的地方?

将2D数组转换为图形

如何使覆盖div与可水平滚动的父div相关?

将字符串UTC Date转换为ngx—counting leftTime配置值的数字

成功完成Reducers后不更新状态

如何在模块层面提供服务?

Ember.js 5.4更新会话存储时如何更新组件变量

自定义确认组件未在vue.js的v菜单内打开

为什么云存储中的文件不能公开使用?

自定义图表工具提示以仅显示Y值

如何组合Multer上传?

未捕获的不变违规:即使在使用DndProvider之后也应使用拖放上下文

Chrome上的印度时区名S有问题吗?