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"
}
]

haron68 · Accepted Answer · 2020-02-29 23:10:05Z

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>

answered Feb 29, 2020 at 23:10

haron68

7912 gold badges6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mahmoud sehsah Over a year ago

hi, thank u for help but u can help me more it's not work with me

haron68 Over a year ago

What's the issue you see when you try this solution?

Mahmoud sehsah Over a year ago

it's worked fine but i forget tell u data in loop by category

Mahmoud sehsah Over a year ago

every id have male_addition array i need show name only in male_addition array now he show all data not by id

haron68 Over a year ago

What are you attempting to achieve? What do you mean by data in loop by category? I don't see the word category in the API response.

|

Collectives™ on Stack Overflow

ionic 4 multi array in for loop

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related