I encountered an error while parsing json data. Here is the json snippet:
[{
"name": "TqgQdaaqQU",
"location": "YEyFMkCiAjGRsxa",
"type_id": 68,
"gos_prinad_id": 64,
"disloc_country_id": 95,
"adm_terr_id": 57,
"lat": 142.48033105609792,
"lon": 90.31768510181121,
"alt": 483,
"hops": [{
"hop_type": "KZMzTuUnNw",
"id_sl_hop": 928,
"hop_text": "GZOvhipRpTgwPDkeGKrl"
}]
}]
Here is a portion of my template code related to the <div> block
<tbody>
<tr *ngFor='let list of lists'>
<td>{{ list.name }}</td>
<td>{{ list.location }}</td>
<td>{{ list.type_id }}</td>
<td>смотр.</td>
<td>{{ list.lat }}</td>
<td>{{ list.lon }}</td>
<td>{{ list.alt }}</td>
</tr>
<tr>
<td colspan="6"></td>
<td colspan="2">Страниц: из </td>
<td colspan="2">Просмотр: из </td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<div>
<br>
<table>
<thead>
<tr>
<th>Тип ХОП</th>
<th>Текст ХОП</th>
<th>Номер ХОП</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let new_var of list.hops">
<td>{{ new_var.hop_type }}</td>
<td>{{ new_var.id_sl_hop }}</td>
<td>{{ new_var.hop_text }}</td>
</tr>
</tbody>
</table>
</div>
Although I have no issues with using {{list.name}} and others, I am facing an error specifically with {{new_var.hop_type}} displaying
TypeError: Cannot read property 'hops' of undefined