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

Question

i am trying to return products from my backend api and display it on my frontend page. When i execute the *ngFor loop it gives me an error. Here are my codes.

My Backend API

data    
   0    
    name    "perferendis"
    totalPrice  323.76
    rating  5
    discount    43
  href  
    link    "http://localhost:8000/api/products/1"
   1    
     name   "non"
     totalPrice 92.34
     rating 3.5
     discount   19
   href 
      link  "http://localhost:8000/api/products/2"
    2   
     name   "a"
     totalPrice 246.76
     rating 3
     discount   38
  href  
    "http://localhost:8000/api/products/3"
    3   
     name   "vitae"
     totalPrice 537.57
     rating "No rating yet"
     discount   1
   href 
     link   "http://localhost:8000/api/products/4"

  links 
     first  "http://localhost:8000/api/products?page=1"
     last   "http://localhost:8000/api/products?page=3"
     prev   null
     next   "http://localhost:8000/api/products?page=2"
meta    
   current_page 1
from    1
last_page   3
path    "http://localhost:8000/api/products"
per_page    20
to  20
total   60

My Service

getProducts(): Observable<any> {
  return this.http.get('http://localhost:8000/api/products')
  .map(res => {
      return res;
  });

My Component

products: Products[];

constructor(private productservice: ProductService) { }

  ngOnInit() {
  this.productservice.getProducts()
  .subscribe(res => this.products = res);
  }

}

when i do a for loop in my html file with the products property it returns this error. "Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." What do i need to correct? And how do i get the products object properly displayed?

Edit

<li class="span4" *ngFor="let product of products">

that is my ngFor loop.

can you post what you see when you print console.log(JSON.stringify(this.products)); — Sajeetharan
– Sajeetharan, Commented Mar 3, 2018 at 13:04
As the error message tells. The value you iterate over using *ngFor has to be an array. *ngFor can't iterate objects. — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 3, 2018 at 13:08
Better to show us how are you using *ngFor in your template? — micronyks
– micronyks, Commented Mar 3, 2018 at 13:09

user7518s · Accepted Answer · 2018-03-03 13:17:09Z

5

In your service, you are returning an object with only one property data, which is still an object, not an array.

Try returning res.data:

getProducts(): Observable<Products[]> {
  return this.http.get('http://localhost:8000/api/products')
  .map(res => {
      return res.data;
  })

answered Mar 3, 2018 at 13:17

user7518s

4921 gold badge8 silver badges16 bronze badges

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

1 Comment

Patrick Obafemi Over a year ago

Worked a treat. Thanks

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related