Below is the sample response from an API. How can use I Vuetify Data Tables to render it.
Json:
{
"records":[[101,"Aa"],[102,"Bb"],[103,"Cc"]],
"column_names":["Id","Name"]
}
Table:
Id | Name
- - - - - - -
101 | Aa
102 | Bb
103 | Cc
Key problem is that it don't have items as dictionary.
For basic Vuetify data table, you need to define headers and items as empty arrays.
data() {
return {
headers: [],
items: []
}
}
Then just fetch your "column_names" data to populate headers and "records" data to populate items
Something like:
response['column_names'].forEach(resp => {
this.headers.push({ text: resp, value: resp.toLowerCase() })
})
response['records'].forEach(resp => {
this.items.push({ id: resp[0], name: resp[1] })
})
Items keys just need to match with the headers values (in your example : "id" and "name")
for the html, map it to the item array by index?
<td>{{ props.item[0] }}</td>
<td>{{ props.item[1] }}</td>
the reason to use array of array is for performance, right? I dont think changing it to object is a proper solution.
