gpt4 book ai didi

javascript - 映射表数据二维数组

转载 作者:行者123 更新时间:2023-12-03 02:02:37 24 4
gpt4 key购买 nike

我有一个有点奇怪的问题,我无法解决。我必须使用 react 来渲染表格 - 但是我的数据结构是这样的,我需要第一级的名称作为表格标题 - 然后我需要将与该标题关联的数据映射到表格中的正确单元格中。

这是我的数据

[{
"cell_id": 1,
"step_data": [{
"width": 1920,
"name": "bruce",
}, {
"width": 2236,
"name": "ben",

}],
"cell_name": " boys names"
},
{
"cell_id": 2,
"step_data": [{
"width": 1920,
"name": "grace",
}, {
"width": 2236,
"name": "megan",

}],
"cell_name": "girls names"
}

为了映射表格标题,我这样做会动态呈现标题,但是我似乎无法将数据放在正确的标题下,因为它们都位于同一行。

我有什么想法可以做到这一点吗?

我想要的任务是有一个包含两个标题男孩名字和女孩名字的表 - 我需要男孩名字中的步骤数据作为男孩名字标题下的行,而女孩名字中的步骤数据作为女孩名字标题下

<table className="table">
<tbody>
<tr>
{this.props.data.map((item, key) => <th key={key}>{item.cell_name}</th>
)}

</tr>
{this.props.data.map(data => data.map((z, key) => <td key={key}>{z.name}</td>))}

<tr>

</tr>

</tbody>
</table>

最佳答案

{[
...Array( // get the number of rows you need to create
Math.max(...this.props.data.map(({ step_data }) => step_data.length))
).keys()
].map(i => (
<tr key={i}>
{this.props.data.map(({ step_data, cell_name }) => (
<td key={cell_name}>{(step_data[i] || {}).name}</td>
))}
</tr>
))}

关于javascript - 映射表数据二维数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49946415/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com