Some error with parse json

Question

I have some error when i parse json data. This is json:

    [{
    "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"
    }]
}]

And this is a part of my template. UPD for <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>

with {{list.name}} and etc. i have no problem, but with {{new_var.hop_type}} i have this error TypeError: Cannot read property 'hops' of undefined, please, help!

Answer 1

You get that error because variable list is a local template variable and it only exists in your first <tr> tag thanks to keyword let. This is solution for your problem:

<table>
<tbody *ngFor='let list of lists'>
   <tr>
      <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 *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>

This way, variable list can be accessed in your second *ngFor iteration and you'll be able to display all your data properly.