ERROR Cannot find a differ supporting object '[object Object]' of type 'object'

Question

I'm newbie in Angular 8 and I'm trying to implement a service to get the data in JSON format loaded into an API but I've got the following error on the console

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

I've also been reading similar questions for this error but I'm haven't been able to solve it

Here's my .ts code where I make the service call

@Injectable({
  providedIn : 'root'
})
export class CarsService {

  private CarURL = 'https://catalogo-autos.herokuapp.com/api/autos';

  constructor(private http: HttpClient) { }

 getCars(): Observable<Car[]>{

   return this.http.get<Car[]>(this.CarURL);

 }
}

And here is the service:

  ngOnInit() {

    this.getCars();
  }

  getCars(): void {

    this.carService.getCars().subscribe((carsTemp)=>{
      this.cars = carsTemp;
    })
  }

Finally heres my HTML markup

<ng-container *ngFor="let car of cars">
    <div class="cars">
        <div class="fas fa-eye" (click)="onSelect(car,infAuto)"></div>
        <div>{{car.description}} </div>
    </div>
</ng-container>

I'll appreciate any further help

KamLar · Accepted Answer · 2020-03-26 20:52:49Z

2

You have to access to data property of response you get. The object, you are getting isn't array. It is object with some extra data, which one of the field data is actually your required property. You have to remember, that after compiling your typescript code, you are getting js and respone is parsed via JSON.parse (be aware when some of fields are f.e. type of Date)

answered Mar 26, 2020 at 20:52

KamLar

4284 silver badges9 bronze badges

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

Comments

Barremian · Accepted Answer · 2020-03-26 22:22:43Z

2

Loading the API, it looks like the required cars array is actually within data property.

You could map the result to the data property before returning the observable to the controller. Try the following

Service

@Injectable({
  providedIn : 'root'
})
export class CarsService {
  private CarURL = 'https://catalogo-autos.herokuapp.com/api/autos';

  constructor(private http: HttpClient) { }

  getCars(): Observable<Car[]>{
    return this.http.get<Car[]>(this.CarURL).pipe(map(response => response.data));
  }
}

answered Mar 26, 2020 at 22:22

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Collectives™ on Stack Overflow

ERROR Cannot find a differ supporting object '[object Object]' of type 'object'

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related