CODEWITHSUNDEEP
angular7
seekerJackson
seekerJackson

Reputation: 41

Angular: how to do *ngFor for associative array

dataJSON (array) dataList.const.ts https://codebeautify.org/jsonviewer/cb28b09d

component.html

//1st *ngFor (worked <tr *ngFor="let item of list"> {{item.city.id}} {{item.city.name}} {{item.city.coord.lon}} {{item.city.coord.lat}} {{item.city.country}} {{item.city.population}}

enter image description here

//2nd *ngFor (cannot display)

<tr *ngFor="let item of list">
        <td>
      {{item.list_}}
        </td>
        <td>
      {{item.list_.temp.day}} °C
        </td>
        <td>
      {{item.list_.temp.min}} °C
        </td>
        <td>
      {{item.list_.temp.max  }} °C
        </td>
        <td>
      {{item.list_.temp.night  }} °C
        </td>
        <td>
      {{item.list_.temp.eve  }} °C
        </td>
        <td>
      {{item.list_.temp.morn  }} °C
        </td>
        <td>
      {{item.list_.pressure}} hpa
        </td>
        <td>
      {{item.list_.humidity}} %
        </td>
        <td>
              {{item.list_.weather.id }}
        </td>
        <td>
      {{item.list_.weather.main }}
        </td>
        <td >
      {{item.list_.weather.description }}
        </td>
        <td>
      {{item.list_.weather.icon }}
        </td>
        <td>
      {{item.list_.speed}} meter/sec
        </td>
        <td>
      {{item.list_.deg}} °
        </td>
        <td>
      {{item.list_.clouds}} %
        </td>
        <td>
              {{item.list_.rain}}
        </td>
    </tr>

3

Upvotes: 0

Views: 973

Answers (1)

Soumya Kanti
Soumya Kanti

Reputation: 1479

You may want to take a look into this: ngFor inside ngFor

Basically you should write something like this:

*ngFor = "let item of list"

And then

*ngFor = "let l of item.list_"

Then use

<td>{{l.temp.night}}</td>

https://stackblitz.com/edit/ngfor-example-pnuhfh

This is a stackblitz example for your answer, based on your feedback comments.

The relevant code snippet is:

<tr *ngFor = "let item of fetchData">
  <td *ngFor = "let l of item.list_">
    {{l.dt}}|
    {{l.temp.night}}|
  </td>
</tr>

Upvotes: 1

Related Questions