AngularFire2 iterate through array of objects and get data from realtime database

Question

I have to go through an array of items and fetch the prices in the realtime database, but I want to show a loading message on start and after I finish loading I want to remove the loading message, but the way I did the message does not work its removed before the end of loading:

let loading = this.loadingCtrl.create({
  content: 'Waiting...'
});
loading.present();

for (let i = 0; i <= this.Cart.length - 1; i++) {
  let product = this.db.object('/menuItems/' + this.Cart[i].item.itemId);
  product.valueChanges().subscribe((prodData: any) => {
      if (prodData != null) {
          this.Cart[i].item.price = prodData.price[0]; 
      }
  });
}
loading.dismiss();

How can I do this correctly?

Answer 1

You need to hide the loading indicator inside the subscriber. The simplest way is to hide it when the first data comes in:

for (let i = 0; i <= this.Cart.length - 1; i++) {
  let product = this.db.object('/menuItems/' + this.Cart[i].item.itemId);
  product.valueChanges().subscribe((prodData: any) => {
      if (prodData != null) {
          this.Cart[i].item.price = prodData.price[0]; 
      }
      loading.dismiss();
  });
}

A bit more tricky is to hide it after all data comes back, but it doesn't have to be too hard. A simple way is to count how many responses you've gotten back. Once that is the same as the number of items in the cart, you can hide the loading indicator.

var responseCount = 0;
for (let i = 0; i <= this.Cart.length - 1; i++) {
  let product = this.db.object('/menuItems/' + this.Cart[i].item.itemId);
  product.valueChanges().subscribe((prodData: any) => {
      if (prodData != null) {
          this.Cart[i].item.price = prodData.price[0]; 
      }
      if (responseCount++ == this.Cart.length) loading.dismiss();
  });
}