Showing sub array content

Issue

I´m trying to show the content of array products at home.ts on home.html.

export class HomePage {
  public products: any[] = [
    {
      theater: {
        '30': {
          id: '44',
          name: 'product 30',
        },
      },
      party: {
        '31': {
          id: '45',
          name: 'product 45',
        },
        '32': {
          id: '46',
          name: 'product 46',
        },
      },
    },
  ];

  constructor(
    public navCtrl: NavController,
    public alertCtrl: AlertController
  ) {}
}

interface userData {
  name: string;
  email: string;
  testType: string;
}

My code at home.html is:

<div *ngFor="let product of products[0]">

  <ion-card style="padding:0; margin:0; border-radius: 0; border-bottom: solid rgb(215, 215, 215) 1px;" *ngFor="let product of category">
    <ion-card-content style="padding:0; margin:0;">
      <ion-list>
        <ion-item lines="none" style="color: black;">
          <ion-thumbnail slot="start">
            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" style="border-radius: 50%;" />
          </ion-thumbnail>
          <ion-label>
          <p style="font-weight: 800; color: black;">Name: {{category.name}}</p>
          <p style="color: black;">31/12 às 22hrs</p>
          <p style="font-style: italic; color: black;">Cachaçamba,</p> 
          <p style="color: black;">Rio Verde - GO</p>           
        </ion-label>      
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>

</div>   

But I'm getting error:

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

What is the better way to display the sub array from key's value party?

My code is available at: stackblitz

Solution

You can use KeyValuePair to iterate the object in *ngFor. But unfortunately, it requires Angular 6 and above.

Will recommend transforming your products array with key-value pair to an array of objects that are easier to be manipulated.

[
    {
        "category": "theater",
        "data": [
            {
                "categoryId": "30",
                "product": {
                    "id": "44",
                    "name": "product 30"
                }
            }
        ]
    },
    {
        "category": "party",
        "data": [
            {
                "categoryId": "31",
                "product": {
                    "id": "45",
                    "name": "product 45"
                }
            },
            {
                "categoryId": "32",
                "product": {
                    "id": "46",
                    "name": "product 46"
                }
            }
        ]
    }
]

The below code transforms the array of key-value pair into nested arrays. And lastly, flatten the nested arrays.

formattedProducts: any[] = this.products
    .map((x) =>
      Object.entries(x).map((cat) => ({
        category: cat[0],
        data: Object.entries(cat[1]).map((y) => ({
          categoryId: y[0],
          product: y[1],
        })),
      }))
    )
    .reduce((acc: any[], cur) => acc.concat(cur), []);

And modify the HTML to suit the formattedProducts data.

<ion-content *ngFor="let category of formattedProducts">
  <ion-card
    style="
      padding: 0;
      margin: 0;
      border-radius: 0;
      border-bottom: solid rgb(215, 215, 215) 1px;
    "
    *ngFor="let cat of category.data"
  >
    <ion-card-content style="padding: 0; margin: 0">
      <ion-list>
        <ion-item lines="none" style="color: black">
          <ion-thumbnail slot="start">
            <img
              alt="Silhouette of mountains"
              src="https://ionicframework.com/docs/img/demos/thumbnail.svg"
              style="border-radius: 50%"
            />
          </ion-thumbnail>
          <ion-label>
            <p style="font-weight: 800; color: black">Name: {{cat.name}}</p>
            <p style="color: black">31/12 às 22hrs</p>
            <p style="font-style: italic; color: black">Cachaçamba,</p>
            <p style="color: black">Rio Verde - GO</p>
          </ion-label>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>

Demo @ StackBlitz

Answered By - Yong Shun