How to use rowspan with PugJS whilst extracting variables from a JSON object - html-table

Question

I have a json object representing a list of teams and each team has three players. I am using express / pug to create table data.
The input structure is like this:
{ teams: [
team: <string>,
rank: <number>,
members: [
name: <string>,
nationality: <string>,
age: <number>,...
]
],...}
I can see how to generate the cells where the team and all three members are across one row using two each statements:
each val1 in teams
tr
td #{val1.team}
td #{val1.rank}
each val2 in val1.members
td
td #{val2.name}
td #{val2.nationality}
td #{val2.age}
Resulting in one row per team.
|----------|---------–|--------|-----------|-----|--------|-----------|-----|--------|-----------|-----|
| Team | Rank | Name |Nationality| Age | Name |Nationality| Age | Name |Nationality| Age |
|----------|---------–|--------|-----------|-----|--------|-----------|-----|--------|-----------|-----|
But I want to have the three team members above each other like this:
|----------|---------–|--------|-----------|-----|
| | | Name |Nationality| Age |
| | |--------|-----------|-----|
| Team | Rank | Name |Nationality| Age |
| | |--------|-----------|-----|
| | | Name |Nationality| Age |
|----------|---------–|--------|-----------|-----|
this could be done using rowspan cells, but I can't figure out how to map the variables.
<tr>
<td rowspan="3">Team</td>
<td rowspan="3">Rank</td>
<td>Name</td>
<td>Nationality</td>
<td>Age</td>
</tr>
<tr>
<td>Name</td>
<td>Nationality</td>
<td>Age</td>
</tr>
<tr>
<td>Name</td>
<td>Nationality</td>
<td>Age</td>
</tr>
How can I map the json object in PugJS to generate the layout?
regards
Steve

Answer 1

You're very close. It's a matter of getting the indentation right in pug and inserting the rows for each player. Here's a codepen example with the table generated live.
table
each team in teams
tr
td(rowspan= team.members.length + 1)= team.team
td(rowspan= team.members.length + 1)= team.rank
each player in team.members
tr
td= player.name
td= player.nationality
td= player.age

Answer 2

Another way to do this would be to use a tbody element to section off each team, then you can conditionally render the "team" and "rank" cells only in the first row. Setting rowspan="0" on these cells will make them expand the full extent of their tbody section.
Here's a codepen example forked from Graham's pen.
table
each team in teams
tbody
each player, i in team.members
tr
if (i == 0)
th(rowspan='0', scope='row')= team.team
td(rowspan='0')= team.rank
td= player.name
td= player.nationality
td= player.age
Given some data, the above will render:
table,
th,
td {
border: 1px solid black;
}
<table>
<tbody>
<tr>
<th rowspan="0" scope="row">Aberdeen United</th>
<td rowspan="0">1</td>
<td>Adam</td>
<td>Ireland</td>
<td>22</td>
</tr>
<tr>
<td>Bruce</td>
<td>Scotland</td>
<td>23</td>
</tr>
<tr>
<td>Charles</td>
<td>Wales</td>
<td>21</td>
</tr>
</tbody>
</table>