I have a below input
with nested array of objects.
summary
is parent array of objects and run_type
is nested one.
let input = {
"summary": [
{
"name": "Release",
"run_type": [
{
"environment": "6nc",
"type": "QA1"
},
{
"environment": "3nc",
"type": "QA2"
}
]
}
]
}
I want to display a table like this. Name
field has rowspan
of 2 since there are 2 run_type
for each summary
------------------------------------
Name | Environment | RunType |
------------------------------------
Release | 6nc | QA1 |
| 3nc | QA2 |
------------------------------------
To display a table like this statically, i can do this way
<table>
<thead>
<tr>
<th>Vertical</th>
<th>Environment</th>
<th>RunType</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Release</td>
<td>6nc</td>
<td>QA1</td>
</tr>
<tr>
<td>3nc</td>
<td>QA2</td>
</tr>
</tbody>
</table>
can someone please let me know how to dynamically show this table. I tried using this way but was unsuccessful. the problem is that i am able to rowspan Name column into 2 rows but all other columns are not being placed as two rows within that same Name section
<table>
<thead>
<tr>
<th>Vertical</th>
<th>Environment</th>
<th>RunType</th>
</tr>
</thead>
<tbody>
{input?.summary?.map((project, indx) => {
return (
<tr>
<td rowspan="2">{project?.name}</td>
{project?.run_type?.map((runType, indx) => {
return (
<>
<td>{runType.environment}</td>
<td>{runType.type}</td>
</>
);
})}
</tr>
);
})}
</tbody>
</table>
3
Answers
You need a
<tr>
perrun_type
, so the inner loop should generate the<tr>
, not the outer. As the<td>
with rowspan should only be created for the first row of the project, use a conditional expression withindx==0
to generate it:The problem arises from the fact that you’re using a single
<tr>
element to iterate through both therun_type
environments and types. This leads to an incorrect rendering of the table structure.Here’s how you can modify your code to achieve this:
I would transform the data into a matrix of text and row-span information first.
Now you can use the matrix to just render the
<tbody>
.