如何从AngularFire2的2级下移键控列表中获取平坦的可观察列表

Question

I can't figure out how to get flat collection of Products where I've managed my data in form Prods/$companyKeys/$prodKeys

{
  "ID1" : {
    "prodID1" : {
      "name" : "Car"
    },
    "prodID2" : {
      "name" : "Door"
    },
    "prodID3" : {
      "name" : "Sandwich"
    }
  },
  "ID2" : {
    "ProdID4" : {
      "name" : "Glass"
    },
    "ProdID5" : {
      "name" : "Pen"
    }
  }
}

Is there a simple way in rxjs or in AngularFire2 itself to get directly collection of products, omitting company Ids? Or do I have to re-arrange my data?

Thanks

Answer 1

Observable.flatMap is made for such a purpose ( fiddle ):

// turn products into array
var arr = [];
for(var key in products) {
  arr.push(products[key]);
}

Rx.Observable.from(arr)
  .flatMap(x => {
    // 'x' is like object ID1, create array of products
    var arr = [];
    for (var key in x) {
      arr.push(x[key]);
    }
    return Rx.Observable.from(arr);
  })
  .subscribe(x => document.write(JSON.stringify(x) + '</br>'));

Output:

{"name":"Car"}
{"name":"Door"}
{"name":"Glass"}
{"name":"Sandwich"}
{"name":"Pen"}

Not sure how you want to handle the keys, but you can use Observable.pairs to make it even easier to loop through the object properties. The resulting stream is of arrays with the first element being the key and the second being the value for the object properties:

Rx.Observable.pairs(products)
    .flatMap(x => Rx.Observable.pairs(x[1]))
    .subscribe( x => console.log(x[0], x[1]));

This returns arrays like this:

["prodID1", {name: "Car"}]
["prodID2", {name: "Door"}]
["prodID3", {name: "Glass"}]
["prodID4", {name: "Sandwich"}]
["prodID5", {name: "Pen"}]