Rendering a custom table in Vuejs - vuejs3

Question

I am trying to render a table based on JSON object that I get from an API. The simplified object looks like this:
{
"id": 1,
"enabled": true,
"headers": [
{
"id": 1,
"header_name": "LastName",
"colVal": { "id": 1, "value": "Hopper" }
},
{
"id": 2,
"header_name": "FirstName",
"colVal": { "id": 1, "value": "Grace" }
}
]
}
What I want to be able to do from this JSON object is create a table like this:
LastName
FirstName
Hopper
Grace
Also, this table could have more data in colVal, in this case the JSON will look like this
{
"id": 1,
"enabled": true,
"headers": [
{
"id": 1,
"header_name": "LastName",
"colVal": [
{ "id": 1, "value": "Hopper" },
{ "id": 3, "value": "Lovelace" }
]
},
{
"id": 2,
"header_name": "FirstName",
"colVal": [
{ "id": 2, "value": "Grace" },
{ "id": 4, "value": "Ada" }
]
}
]
}
And this would be rendered as follows:
LastName
FirstName
Hopper
Grace
Lovelace
Ada
So far I've managed to generalize it enough that I can get the table headers rendered properly but the col values are going to the correct columns, instead a new row is being created. Here is the code
<table v-if="apiResponseData.custom_field_table[0].enabled_ind == true">
<thead>
<tr>
<th
v-for="header in apiResponseData.custom_field_table[0].headers"
:key="header.id"
>
{{ header.header_name }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="headerVal in apiResponseData.custom_field_table">
<div v-for="col in headerVal.headers">
<td style="width: 1%; border: 1px solid; text-align: center">
{{ col.colVal[0].value }}
</td>
</div>
</tr>
</tbody>
</table>

Answer 1

While you could wrangle the template to be able to use the data in its current form, I think you might be better served by running the data through a computed, which will make it much simpler. The thing that complicates the template is that the data array goes in the "horizontal" direction first and the "vertical" second, this makes constructing the loop more complicated. If you transpoze your data, the template will be much simpler.
script:
const headers = computed(()=>{
return hdrData?.headers.map(h => ({header:h.header_name, id:h.id}))
})
const rows = computed(()=>{
let rowData = [];
hdrData?.headers.forEach(h => {
let key = h.header_name
h.colVal.forEach((r, i) => {
if(!rowData[i]) {rowData[i] = {id:i}}
rowData[i][key] = r.value
})
})
return rowData
})
template:
<table v-if="headers">
<thead>
<tr>
<th v-for="{header, id} in headers" :key="id">{{header}}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in rows" :key={row.id}>
<div v-for="{title, id} in headers">
<td style="width: 1%; border: 1px solid; text-align: center">
{{ row[header] }}
</td>
</div>
</tr>
</tbody>
</table>