I am getting some data from backend that json looks like this:

 {
   "id":1,
   "name":"Colombia La Serrania Omniroast Decaf",
   "manufacturer":{
     "id":16,
     "name":"3fe"
    },
   "manufacturerId":16

I care only about 2 fields: coffee name and manufacturer name, so it is coffee.name and coffee.manufacturer.name What I want to do is to create a select with coffee name options that are grouped by manufacturer name. Something like that:

Right now I have this:

  <select>
    <optgroup *ngFor="let coffee of CoffeeList" label="{{coffee.manufacturer.name}}">
            <option *ngFor="let item of coffee" [ngValue]="item.id">{{item.name}}</option>
    </optgroup>
  </select>

But obviously it is not working. Gettting: Error: Cannot find a differ supporting object '[object Object]' of type 'CoffeeName'. NgFor only supports binding to Iterables such as Arrays. since coffee isn't iterable. In most of examples I have seen there is usually list inside an object but not in my case. I have no idea how to get it working.

Fetching:

  CoffeeList: any[] = [];

 getCoffeesList(){
    this.service.getCoffees().subscribe(data => {
      this.CoffeeList = data;
    })
  }