Angular Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Question

I have issue with this "Error trying to diff '[object Object]'. Only arrays and iterables are allowed" when i want to get my products in html

Here is my product.ts

export interface Pizzas{
  _id:string;
  name: string;
  description: string;
  grade: number;
  price: number;
  discount: boolean;
  picture: string;
} 

Here is my service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import {Pizzas} from './product';
import { catchError, Observable, throwError} from 'rxjs';
import {tap} from 'rxjs/operators';


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

  private url ='http://localhost:3000/api/pizzas';

  constructor(private http:HttpClient) { }

  

  getProducts(): Observable<Pizzas[]>{
    return this.http.get<Pizzas[]>(this.url).pipe(tap(data => console.log('All ', JSON.stringify(data))),
    catchError(this.handleError)
    ); 
  }
}

In this console.log everything looks fine, it shows data from json file

Here is my component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import {Pizzas} from './product';
import {ProductsService} from './products.service'



@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  errorMessage: string =' ';
  sub!: Subscription;

  
  products : Pizzas[] =[];

  constructor(private producstService: ProductsService){ }
     
  

  ngOnInit(): void {
    
    this.sub = this.producstService.getProducts().subscribe({
      next: products => {
        this.products = products;        
      },
      error: err => this.errorMessage =err
    });
  }

}

And here is my html

<div *ngFor="let product of products">
  <p> {{product.name}}</p>
</div>

Output in console.log is

All {"results":[{"_id":"1","name":"Hawaiian Pizza","description":"This crowd-pleasing recipe starts with my fluffy homemade pizza crust and is finished with a sprinkle of crisp bacon. Enjoy the unique flavor combination of bacon and pineapple. It’s love at first bite.","grade":3.2,"price":9.99,"discount":true,"picture":"hawaiian-pizza.jpg"},{"_id":"2","name":"Meat Lover's","description":"This hefty, cheesy meal on a crust is packed with three different kinds of meat and simply fantastic flavor. Homemade Italian sausage, apple-smoked bacon, and all-natural uncured pepperoni make this pizza a meat-lover's dream.","grade":4.5,"price":10.49,"picture":"meat-lovers.jpg"},{"_id":"3","name":"Margherita","vegetarian":true,"description":"Sometimes you just can’t beat fresh, simple, and classic Margherita Pizza. This most iconic of pizzas is topped with tomato sauce, fresh mozzarella, and basil leaves, the colors of the Italian flag.","grade":4.8,"price":8,"picture":"margherita.jpg"},{"_id":"4","name":"Quattro Formaggio","vegetarian":true,"description":"This is the classic version of one of the most wonderful combinations of bread and cheese imaginable. If you like cheese, you'll absolutely love this four-cheese pizza dish! The combination of Ricotta, Mozzarella, Gorgonzola, and Parmesan","grade":3.4,"price":11.49,"picture":"quattro-formaggio.jpg"},{"_id":"5","name":"Veggie","vegetarian":true,"description":"There's no need to bring confetti to your next snack-time gathering. Just carry in this colorful pizza that's topped with a rainbow of crunchy vegetables!","grade":2.4,"price":5.49,"discount":true,"picture":"veggie.jpg"},{"_id":"6","name":"Calzone","description":"Experience the taste of an Italian pizzeria with our Italian-style Calzone. Folded pizza richly filled with mushrooms, salami, ham, tomato sauce and cheese, then sprinkled with cheese and herbs.","grade":3.6,"price":8.38,"picture":"calzone.jpg"},{"_id":"7","name":"Pizza Pepperoni-Salame","description":"Certain to be a favourite among meat lovers, this pizza blends delicious slices of mild salami with smaller, hotter pepperoni pieces.  The fiery tastes are balanced with the delicate mozzarella and Edam cheese flavours.","grade":3.9,"price":7.99,"discount":true,"picture":"pepperoni-salame.jpg"},{"_id":"8","name":"Pizza Funghi","vegetarian":true,"description":"This popular vegetarian pizza is topped with the finest aromatic mushrooms, juicy mozzarella and Edam cheeses, and finished with a herb garnish.","grade":2.8,"price":6.42,"discount":true,"picture":"funghi.jpeg"},{"_id":"9","name":"Pollo Arrabiata","description":"The latest addition to the Nation's Favourite thin & crispy menu is generously topped with chicken, red pepper, red onion, mozzarella and Edam cheeses, and a spicy Roquito garnish sauce.","grade":3.2,"price":11.29,"picture":"pollo-arrabiata.jpg"},{"_id":"10","name":"Bolognese","description":"Experience the taste of an Italian Pizzeria with our thin and crispy, Italian-style pizza, deliciously topped with mozzarella and Edam cheeses, minced beef, tomato pieces and onions. Why not try some of our other delicious varieties.","grade":3.7,"price":9.99,"discount":true,"picture":"bolognese.jpg"},{"_id":"11","name":"Mozzarella","description":"The wonderful aroma of fresh mozzarella cheese provides this pizza with its elegant taste and is the perfect combination with tomatoes, Edam cheese and a delightful mix of pesto.","grade":2.9,"price":7.99,"picture":"mozzarella.jpg"},{"_id":"12","name":"Pizza Speciale","description":"Ham and salami make this pizza a special culinary feast! Gouda cheese, mushrooms,and spicy herbs add to the full flavour.","grade":3.8,"price":10.22,"picture":"pizza-speciale.jpg"}]} ```

Answer 1

You may need to return the products from the response, rather than the data object itself e.g.

getProducts(): Observable<Pizzas[]>{
    return this.http.get<Pizzas[]>(this.url).pipe(
       map(data => data.products),
       catchError(this.handleError)
     ); 
}

If this is the case you'll need to change the typing here too get<Pizzas[]>