How to fetch nested JSON to table with VueJs? - json

Question

I need to create a table with Vue and the data are from a JSON. I don't know how to set for the td table tag the "Jogosultsagok" two "Nev" values.
I tried row.Jogosultsagok[0].Nev format, but this not work, I write down the code parts and the final error for this.
HTML
<tbody>
<tr v-for="row in get_rows()">
<td>{{row.Id}}</td>
<td>{{row.Nev}}</td>
<td>{{row.Jogosultsagok[0].Nev}}</td>
<td>{{row.Jogosultsagok[1].Nev}}</td>
</tr>
</tbody>
Vue
data: {
rows:[]
},
created:function() {
fetch('https://api.myjson.com/bins/7jr55')
.then(res => res.json())
.then(res => {
this.rows = res;
})
},
methods: {
"get_rows": function get_rows() {
var start = (this.currentPage-1) * this.elementsPerPage;
var end = start + this.elementsPerPage;
return this.rows.slice(start, end);
},
},
JSON
[
{
"Id": 1,
"Nev": "László",
"Jogosultsagok": [
{
"Id": 1,
"Nev": "Módosítás"
},
{
"Id": 2,
"Nev": "Olvasás"
}
],
"Eletkor": 25,
"Regisztralt": "2019-01-31 06:45:51.557Z",
"Munkahely": {
"Id": 12,
"Nev": "Cég 1"
}
},
{
"Id": 2,
"Nev": "Péter",
"Jogosultsagok": [
{
"Id": 2,
"Nev": "Olvasás"
}
],
"Eletkor": 44,
"Regisztralt": "2011-01-31 09:23:51.234Z",
"Munkahely": {
"Id": 34,
"Nev": "Cég 2"
}
},
...
I get this error: TypeError: Cannot read property 'Nev' of undefined

Answer 1

The problem occures because the JSON response is not consistent:
row.Jogosultsagok[1] is not always defined as the nested Array sometimes only contains one element.
You can fix the error by leaving the table cell empty in case the value is missing:
<template>
<tbody>
<tr v-for="row in get_rows()">
<td>{{row.Id}}</td>
<td>{{row.Nev}}</td>
<td>{{row.Jogosultsagok[0].Nev}}</td>
<td v-if="row.Jogosultsagok[1]">{{row.Jogosultsagok[1].Nev}}</td>
<td v-else></td>
</tr>
</tbody>
</template>