Get object array data inside a document in Firebase

I’ll try to explain this as clear as possible, since English is no my main language: I’m trying to get this object data, which is stored in a field called ‘orders’ inside a user document, basically every order I make through the shopping cart, it creates a new order inside the user document as I’ll show you in the next img.


As can be see from the image the field orders has the following fields: cart which is an object array and Where I want to get that data from!, pickuptime, location and total, those 3 last fields, I have no problem in getting the data.

I can access pickuptime, location and total fields since they aren’t inside the cart object using the following code:

constructor(private aF: AngularFirestore, private aS: AuthService) {
const ordenes = aF.doc(users/${this.aS.getInfo()});
this.userOrders = ordenes.valueChanges();
}

getInfo() method just gets the current user uid.

Now when I try to display the data obtained from the document I just get to display the fields that are out of the cart object array.

This is my code to display data:

<ion-list>
    <ion-card *ngFor="let p of ((userOrders | async)?.ordenes)">
        <ion-card-header>
            <ion-card-title>{{ p.name }}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
            <img src={{p.img}}>
            <br>
            <ion-card-subtitle>{{p.desc}}</ion-card-subtitle>
            <ion-row class="ion-align-items-center">
                <ion-col size="4">
                    <ion-label color="secondary">
                        <b>Total: {{ p.total}}</b>
                    </ion-label>
                </ion-col>
                <ion-col size="8" class="ion-text-right">
                    <b>Recoger en sucursal: {{p.sucursal}}</b>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <b>Hora: {{p.horarecoger}}</b>
                </ion-col>
            </ion-row>
        </ion-card-content>
    </ion-card>
</ion-list>

Any Help would be really aprecciated!

Each member of ordenes has a cart property. It seems to be an array. Arrays (can) have more than one member. You are looping in your template through ordenes, so there will be one <ion-card> for each member of ordenes. There are two main possibilities here, and I have no clue from what you’ve said so far which you want to do:

A. I wish cart wasn’t really an array, as all I care about is the first element in it, and I wish to “promote” it to be just like succursal and friends: one per ordene.
B. Each entry of cart has to be displayed separately in my page.

If A, then you should just be able to write p.cart[0].desc where you currently have p.desc.

If B, you’re going to need a second nested *ngFor="let c of p.cart" on some element inside your card, and reference c.desc from inside there.

Incidentally, if you want to do A, what I would do is massage the data inside a service to do the promotion. In other words, I would leave the template as you have written it, and make the service conform the data to fit that template.

1 Like

Edit:
Worked perfectly THANKYOU VERY MUCH!

I just hace a doubt in terms of desgin, if you could help me hanlde it, it would be very nice!

The card looks great, when only has 1 product, but when there are 2 or more products, it just puts all the names, one by one, desc, one by one, etc.

I would like to know how to get the desgin of the first img, but when having 2 or more products on the card!

Here is my code:

Thankyou again!