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

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

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!