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

Question

I am using angular

Trying to call an api and retrieve data from it however it is throwing this error.

core.js:4352 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

my service looks like

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { User } from '../Models/user.model';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  apiUrl = 'myurl is in here but i cannot show'

  constructor(private _http: HttpClient) { }

  getUsers(){
    return this._http.get<User[]>(this.apiUrl);
  }
}

user model looks like

export class User {
    alertId: any;
    itemId: string;
    title: string;
    description: string;
    categoryId: any;
    riskId: any;
    sourceId: any;
    startDate: any;
    endDate: any;
    link: string;
    countryId: any;
    countries: string;
    keywordMatches: string;
    keywordsMatched: 0;
    createdDate: any;
    createdBy: any;
    isDeleted: true;
    deletedDate: any;
    deletedBy: any;
    latitude: 0;
    longitude: 0;
    notes: string;
    customerId: any;
    formattedAddress: any;
    firstname: any;
    surname: any;
    email: string;
    phone: string;
    smsEnabled: true;
    customerName: string;
    homeCountryId: any;
    travellerTagId: 0;
}

This t.s component using it

import { Component, OnInit } from '@angular/core';
import { User } from 'src/app/Models/user.model';
import { DataService } from 'src/app/Services/data.service';
 
 

@Component({
  selector: 'app-side-nav-alerts',
  templateUrl: './side-nav-alerts.component.html',
  styleUrls: ['./side-nav-alerts.component.css']
})
export class SideNavAlertsComponent implements OnInit {
users$: User[];
  constructor( private dataService : DataService) { }



  ngOnInit(){
    return this.dataService.getUsers()
    .subscribe(data => this.users$ = data)
  
  }

}

HTML

<div *ngFor = 'let user of users$' style="text-align: center;">
    <h2>{{user.name}}</h2>
    </div>

any ideas on how I could use this to loop over ? I essentially just wanna loop over it and display the info collected from the api I understand that maybe I need to convert this into another data type but I am unsure on how to do this.

acincognito · Accepted Answer · 2020-10-16 15:21:53Z

2

You should try:

ngOnInit(){
  this.users$ = this.dataService.getUsers()  
}

instead of

ngOnInit(){
  return this.dataService.getUsers()
  .subscribe(data => this.users$ = data)
}

Since data is actual data and not a Subscription resp. Observable. And btw there's no reason for your ngOnInit to have a return statement.

Turn

users$: User[];

into

users$: Observable<User[]>;

Inside your html you need to use the async pipe like so:

*ngFor = 'let user of (users$ | async)' style="text-align: center;"

edited Oct 16, 2020 at 15:21

answered Oct 16, 2020 at 15:01

acincognito

1,7531 gold badge16 silver badges25 bronze badges

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

8 Comments

bigdawwg Over a year ago

thanks for your help ! but i still get this error. ``` Type 'Observable<User[]>' is missing the following properties from type 'User[]': json, length, pop, push, and 26 more.ts(2740)```

acincognito Over a year ago

that means that you dont have an Observable of an array but something else. Btw: your User class does not have a member named name. A stackblitz would be nice.

acincognito Over a year ago

users$: User[]; -> users$: Observable<User[]>;

acincognito Over a year ago

Have you looked at the response in your browsers dev-tools? Is it successful? Is 'data' really an array of Users?

Owen Kelvin Over a year ago

This answer should work. Its is probably the response that is not an array as stated by @acincognito

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related