with *ngFor, I cannot fetch the data from my component.ts to my component.html

The same method works for one class but does not work for another class.

Here is my service class

export class FoodListService {

  private url = environment.serverURL;



  constructor(private http: HttpClient) {

  }



  //get all products from one store

  getAllProducts(storeId: Number): Observable<FoodListModelServer[]> {

    return this.http.get<FoodListModelServer[]>(this.url + 'foodlist/' + storeId);

  }

Here is my component class

export class FoodListComponent implements OnInit {



  foodlist: FoodListModelServer[] = [];

  

constructor(private foodListService: FoodListService, private router: Router, private route: ActivatedRoute) {}



ngOnInit(): void {

    

      this.foodListService.getAllProducts(this.storeId).subscribe(food => {



        this.foodlist = food;

        console.log(this.foodlist);

      });    

   }

}

Here is my component.html

<div class="col-md-8 col-lg-10 col-sm-6 card">

        <li *ngFor="let foodlist of foodlist">

            {{foodlist.food_name}}

            

        </li>

</div>

Console.log(this.foodlist)

I get and object {count: 5, stores: Array(5)}

Why do I get a count included forming an object instead of just the Array?

How do I get only the array?

I have same code with the other component and it works fine. I tried everything mentioned online with no progress.