How to access contents of parsed array with *ngFor in Ionic 3?

Issue

I need help accessing the contents of the array withing *ngFor. Bellow is the JSON response from the array:

ARRAY CONTENT

This is how i am calling the content with ngFor

product.html

<ion-item-group *ngFor="let menu of products; let i = index">
    <ion-item class="item-frame" (click)="view(menu.id)" tappable>
        <div class="item-image" [style.background-image]="'url(' + menu.products.image_path + ')'">
            <ion-row class="item-bar" align-items-center>
                <ion-col col-2 *ngIf="menu.type !== 'fb'">
                    <ion-icon name="custom-hat"></ion-icon>
                </ion-col>
                <ion-col col-2 *ngIf="menu.type === 'fb'">
                    <ion-icon name="custom-facebook"></ion-icon>
                </ion-col>
                <ion-col col>
                    <h2 *ngIf="menu.type !== 'fb'">{{menu.products[0].name}}</h2>
                    <h2 *ngIf="menu.type === 'fb'">{{menu.products[0].name}}</h2>
                    <!-- <p>{{menu.products[0].resume}}</p> -->
                    <p>{{menu.products[0].id}}</p>
                </ion-col>
            </ion-row>
        </div>
    </ion-item>

product.ts

//Load the products
load(loading?: boolean, refresher?: Refresher) {
    this.loadingProvider.show(loading);
    this.productProvider.sorted().subscribe((data: any) => {
        this.loadingProvider.hide(refresher);
        if (data.status === "success") {


            var menus = [this.parseCategories(data.data)];
            //console.log(menus, "ora aqui tens")
            this.products = menus[0];       

            console.log(this.products, "ai")
        }
        this.content.resize();
    }, (error: any) => {
        this.loadingProvider.hide(refresher);
    })
}

parseCategories(data: any): any[] {
    let res: any = [];
    let cats = Object.keys(data);
    let products = data;
    cats.forEach((category: any) => {
        let newCategory = {
            name: category,
            hide: false,
            products: products[category]
        }
        res.push(newCategory);
    });
    return res;

}

The problem I have is that I only get one of each of the first element in each array! Result

This is what im getting I would appreciate greatly if someone help me to get all the contents of each array, not just the first one. Thanks in advance!

Solution

After breaking two keyboards, I found the solution. I had to use index within *ngFor.

products.html

<ion-list class="list-frame" *ngIf="products">
</ion-list>
<ion-item-group *ngFor="let produtos of products; let i = index">
    <ion-item-divider color="white" sticky>{{produtos.name}}</ion-item-divider>
    <ion-item class="item-frame" (click)="view(product.id)" *ngFor="let produtos of products[i].products" tappable>
        <div class=" item-image" [style.background-image]="'url(' + produtos.image_path + ')'">
            <ion-row class="item-bar" align-items-center>

                <ion-col col-2 *ngIf="produtos.type !== 'fb'">
                    <ion-icon name="custom-hat"></ion-icon>
                </ion-col>
                <ion-col col-2 *ngIf="produtos.type === 'fb'">
                    <ion-icon name="custom-facebook"></ion-icon>
                </ion-col>
                <ion-col col>
                    <h2 *ngIf="produtos.type !== 'fb'">{{produtos.name}}</h2>
                    <h2 *ngIf="produtos.type === 'fb'">{{produtos.name}}</h2>
                    <p>{{produtos.resume}}</p>
                </ion-col>
            </ion-row>
        </div>
    </ion-item>
</ion-item-group>

product.ts

//Load the products
load(loading?: boolean, refresher?: Refresher) {
    this.loadingProvider.show(loading);
    this.productProvider.sorted().subscribe((data: any) => {
        this.loadingProvider.hide(refresher);
        if (data.status === "success") {
            this.products = this.parseCategories(data.data);    
        }
        this.content.resize();
    }, (error: any) => {
        this.loadingProvider.hide(refresher);
    })
}

parseCategories(data: any): any[] {
    let res: any = [];
    let cats = Object.keys(data);
    let products = data;
    cats.forEach((category: any) => {
        let newCategory = {
            name: category,
            hide: false,
            products: products[category]
        }
        res.push(newCategory);
    });
    return res;

}

Answered By - Daniel Morais