ionic 4 multi array in for loop

Question

I need to use one *ngFor in ionic4.

This is my code,

        <ion-item *ngFor="let item of data.name">
            <ion-checkbox mode="md"  [(ngModel)]="data.checked" value="0" ></ion-checkbox>
            <ion-label class="title-add">{{item}} </ion-label>
            <ion-label slot="end" class="ion-text-end price-add">
                <ion-text color="medium">+ {{prop}} ريال </ion-text>
            </ion-label>
        </ion-item>

I have two arrays

data.name and data.price

I need to make it same loop in ion-item. How can I make it?

API response:

male_addition: [
{
id: 33,
name: [
"pepsi",
"cola"
],
name_additions: "drinks",
price: [
"3",
"3"
],
type: 2,
male_id: 15,
details_id: 45,
created_at: "2020-02-28 16:16:18",
updated_at: "2020-02-28 16:16:18"
}
]

Answer 1

You should map your two arrays assuming they're always associated with each other into a new array of objects that are of type {name: string; price: number;}.

Do something like this,

this.namePriceArray = this.male_addition.flatMap(data => 
                                    data.name.map((n, i) => ({name: n, price: data.price[i]})));

And then you can use this.namePriceArray in your *ngFor inside of <ion-item>.

        <ion-item *ngFor="let item of namePriceArray">
            <ion-checkbox mode="md"  [(ngModel)]="data.checked" value="0" ></ion-checkbox>
            <ion-label class="title-add">{{item.name}} {{item.price}}</ion-label>
            <ion-label slot="end" class="ion-text-end price-add">
                <ion-text color="medium">+ {{prop}} ريال </ion-text>
            </ion-label>
        </ion-item>