Angular get arrays form object using *ngFor

Question

I have following JSON struncture:

{
  "vt1hourlyForecast": {
    "processTime": [
      "2019-08-23T13:00:00+0300",
      "2019-08-23T14:00:00+0300",
      "2019-08-23T15:00:00+0300"
    ],
    "temperature": [
      43,
      44,
      44
    ],
    "icon": [
      34,
      34,
      32
    ]
  }
}

l am try to get those arrays above from vt1hourlyForecast object using NgFor , but l get error

error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

html

    <ion-item *ngFor="let item of hourly">
    <div style="direction: rtl;margin-inline-end: auto;">
      <div>{{item.vt1hourlyForecast.processTime | date:'h:mm a'}}</div>
      <div>
        {{item.vt1hourlyForecast.phrase}} ,
        درجة الحرارة : °{{item.vt1hourlyForecast.temperature}}
      </div>
    </div>
    <ion-thumbnail slot="end">
      <img src="assets/icon/{{item.vt1hourlyForecast.icon}}.png">
    </ion-thumbnail>
  </ion-item>

Code

 this.http.get("xxxxxxxxx")
        .subscribe(data => {

          this.hourly = data


          console.log("forecast " + this.hourly)
        })

There is any way to get those arrays using NgFor please ?

Pranav C Balan · Accepted Answer · 2019-08-23 09:48:22Z

1

Actually you need to iterate over one of the internal array and get other value based on index currently you are trying to iterate over object which is not iterable.

<ng-container *ngIf="hourly && hourly.vt1hourlyForecast"> <!-- check it's defined -->
<ion-item *ngFor="let time of hourly.vt1hourlyForecast.processTime;let i = index">
<div style="direction: rtl;margin-inline-end: auto;">
  <div>{{time | date:'h:mm a'}}</div>
  <div>
    {{hourly.vt1hourlyForecast.phrase[i]}} ,
    درجة الحرارة : °{{hourly.vt1hourlyForecast.temperature[i]}}
  </div>
</div>
<ion-thumbnail slot="end">
  <img src="assets/icon/{{hourly.vt1hourlyForecast.icon[i]}}.png">
</ion-thumbnail>
</ion-item>
</ng-container>

edited Aug 23, 2019 at 9:48

answered Aug 23, 2019 at 9:38

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ali Ghassan Over a year ago

Thank you for answering , i have errors , ERROR TypeError: Cannot read property 'phrase' of undefined

Ali Ghassan Over a year ago

Thank . he is working now . but still shows error TypeError: Cannot read property 'vt1hourlyForecast' of undefined

Pranav C Balan Over a year ago

@AliGhassan : ya ... initially it will be undefined so wrap it with ng-container or any other eleemt and add ngIf to check defined or not

Ali Ghassan Over a year ago

one love brother , he is working fine now . Thank you

Andreas · Accepted Answer · 2019-08-23 09:44:38Z

You should re-arrange the json to reflect an array structure as

[
    {
        "processTime": "2019-08-23T13:00:00+0300",
        "temperature": 43,
        "icon": 34
    },
    {
        "processTime": "2019-08-23T14:00:00+0300",
        "temperature": 44,
        "icon": 34
    },
    {
        "processTime": "2019-08-23T15:00:00+0300",
        "temperature": 44,
        "icon": 32
    }
]

The corresponding html could be like this:

<ion-item *ngFor="let item of hourly">
    <div style="direction: rtl;margin-inline-end: auto;">
        <div>{{item.processTime | date:'h:mm a'}}</div>
        <div>
            درجة الحرارة : °{{item.temperature}}
        </div>
    </div>
    <ion-thumbnail slot="end">
        <img src="assets/icon/{{item.icon}}.png">
    </ion-thumbnail>
</ion-item>

Collectives™ on Stack Overflow

Angular get arrays form object using *ngFor

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related