首页 > 解决方案 > 如何通过每个对象元素迭代对象数组?

问题描述

我正在尝试迭代对象数组以显示表中的每个对象元素。

那是我的数组:

     list: [
                {header: ['id', 'name', 'date', 'verified']},
                {body: [1, 'abc', '26-10-2019', true]}
            ]

我想在垂直位置渲染一个表格,如下所示: 在此处输入图像描述

这就是我正在尝试做的事情:

const render = list.map((result, idx) => (
            <tr key={idx}>
                <td>{result.header}</td>                
                <td>{result.body}</td>                
            </tr>
        ))

但结果是

<tr>
   <td>id name date verified</td>
</tr>
<tr>
   <td>1 abc 26-10-2019 true</td>
</tr>

标签: javascriptreactjs

解决方案


你需要重复整个表,像这样

const render = list[0].header.map((name, i) => <tr key={i}>
                <td>{name}</td>
                <td>{String(list[1].body[i])}</td>
            </tr>)

推荐阅读