Q:

Get into Firebase complex object containing another object

I've got Angular2 project connected directly with Firebase.
The structure of my database is presented in the picture below. So we've got couple of objects.
Main is orders, then the key od order, some extra information and another object "items" which contains several objects like 0, 1 etc. Each of them has a object called "product" which has some other parameters...
orders
    -> datePlaced,
            items
                -> 0
                    -> quantity, totalPrice, product
                                                  ->
                                                     imageUrl,
                                                        price,
                                                        title

My point is that when I'm creating "My Orders" tab, I'd like to get information of every item in specific order e.g. I see list of orders, and small button "View order", I click and I see details about this order with special key.
I prepared view with orders, buttons but I cannot take any objects form object orders, I've got a blank page.
order-details.component.ts
    export class OrderDetailsComponent implements OnInit, OnDestroy {

order$;
userId: string;
userSubscription: Subscription;

constructor(private orderService: OrderService, private authService: AuthService) {}

async ngOnInit() {
    this.userSubscription = this.authService.user$.subscribe(user => this.userId = user.uid);
    this.order$ = this.authService.user$.switchMap(u => this.orderService.getOrdersByUser(u.uid));
}

ngOnDestroy() {
    this.userSubscription.unsubscribe();
}

}

order-details.component.html
<div class="card" *ngIf="order$ | async as order">
<div class="card-body">
    <h5 class="card-title">Your Order</h5>
    <p class="card-text">You ordered {{ order.datePlaced | date }} items</p>
    <ul class="list-group list-group-flush">
    <li *ngFor="let order of order.shipping" class="list-group-item">
        {{ order.city }} x {{ order.city }}
        <div class="float-right">
        {{ order.totalPrice | currency:'USD':'symbol' }}
        </div>
    </li>
    <li class="list-group-item font-weight-bold">
        Total
        <div class="float-right">
        {{ order.totalPrice | currency:'USD':'symbol' }}
        </div>
    </li>
    </ul>
</div>
</div>

order.service.ts
export class OrderService {

constructor(private db: AngularFireDatabase, private shoppingCartService: ShoppingCartService) { }

async placeOrder(order) {
    let result = await this.db.list('/orders').push(order);
    this.shoppingCartService.clearCart();
    return result;
}

getOrders() { 
    return this.db.list('/orders');
}

getOrdersByUser(userId: string) {
    return this.db.list('/orders', {
    query: {
        orderByChild: 'userId',
        equalTo: userId        
    }
    });
}
}

How can I get every parameter from complex object "orders"?

A:

I solved this by taking param routes in my order-details.component.ts and then a create function getOrder(id) in order service. When you have id of your order it's quite simple to take object from database.

