Отображение данных таблицы 2D-массива
У меня немного странная проблема, которую я не могу решить. Мне нужно отобразить таблицу с помощью реакции - однако моя структура данных такова, что мне нужно, чтобы имя с первого уровня было заголовками таблицы - затем мне нужно сопоставить данные, связанные с этим заголовком, в правильные ячейки в таблице.
Вот мои данные
[{
"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"
}
Чтобы сопоставить заголовки таблицы, я делаю это, что динамически отображает заголовки, однако я не могу поместить данные под правильные заголовки, поскольку все они находятся в одной строке.
Есть идеи, как мне это сделать?
Моя желаемая задача - иметь таблицу с двумя заголовками, имена мальчиков и имена девочек - мне нужно, чтобы step_data из имен мальчиков были строками под заголовком имени мальчика, а данные шага из имен девочек были под заголовком имен девочек.
<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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
{[
...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>
))}
Он создает td со значением step_data[i].name и предотвращает сбой, если step_data[i] не определен (это происходит, если один массив длиннее другого).
Не могли бы вы объяснить синтаксис <td key = {cell_name}> {(step_data [i] || {}). Name} </td> Не уверен, что я полностью понимаю, что происходит?