合并两个可观察的流以生成最终的对象数组

时间:2018-04-05 06:09:42

标签: angular rxjs

我有一个HTTP服务,它返回以下数据:(stackbitz

[
   {
      "customerId":"114860",
      "customerName":"John Dyer",
      "dateOfBirth":"1987-07-19",
      "emailId":"john.dyer@outlook.vom",
      "mobileNo":"6502789426"
   },
   {
      "customerId":"114861",
      "customerName":"Jason Cook",
      "dateOfBirth":"1988-09-22",
      "emailId":"Jason.Cook2@cognizant.com",
      "mobileNo":"6002789426"
   },
   ... and so on

]

获得上述响应后,我想进行另一次HTTP调用,以获取与customerId相对应的详细信息,该详细信息会返回以下数据(请告知customerId:114860):

[  
   {  
      "offerId":"Offer1",
      "offerName":"Wok_Express",
      "offerUrl":"wok_express.png",
      "offerDescription":"Get 10%  discount. Pizzeria where chefs in striped t-shirts toss handmade pizzas."
   },
   {  
      "offerId":"Offer3",
      "offerName":"Only",
      "offerUrl":"only.png",
      "offerDescription":"Get 15% off on refrigerators, washing machine and LED TVs. Get 10% off on all other gadgets"
   },
   {  
      "offerId":"Offer5",
      "offerName":"MakeMyTrip",
      "offerUrl":"MakeMyTrip.png",
      "offerDescription":"Up to Rs. 3000 cashback* on hotels on MakeMyTrip. Offer valid on a min rate of INR 5000."
   },
   {  
      "offerId":"Offer7",
      "offerName":"High_5_Gifts",
      "offerUrl":"high_5_gifts.png",
      "offerDescription":"Saving 15%* up to Rs 350 on first booking of High 5 Gifts. Visit the nearest store for details"
   }
]

现在我想合并上面的两个流,以便它可以提供以下结果数据:

 [  
   {  
      "customerId":"114860",
      "customerName":"John Dyer",
      "dateOfBirth":"1987-07-19",
      "emailId":"john.dyer@outlook.vom",
      "mobileNo":"6502789426",
      "offers":[  
         {  
            "offerId":"Offer1",
            "offerName":"Wok_Express",
            "offerUrl":"wok_express.png",
            "offerDescription":"Get 10%  discount. Pizzeria where chefs in striped t-shirts toss handmade pizzas."
         },
         {  
            "offerId":"Offer3",
            "offerName":"Only",
            "offerUrl":"only.png",
            "offerDescription":"Get 15% off on refrigerators, washing machine and LED TVs. Get 10% off on all other gadgets"
         },
         {  
            "offerId":"Offer5",
            "offerName":"MakeMyTrip",
            "offerUrl":"MakeMyTrip.png",
            "offerDescription":"Up to Rs. 3000 cashback* on hotels on MakeMyTrip. Offer valid on a min rate of INR 5000."
         },
         {  
            "offerId":"Offer7",
            "offerName":"High_5_Gifts",
            "offerUrl":"high_5_gifts.png",
            "offerDescription":"Saving 15%* up to Rs 350 on first booking of High 5 Gifts. Visit the nearest store for details"
         }
      ]
   },
   {  
      "customerId":"114861",
      "customerName":"Jason Cook",
      "dateOfBirth":"1988-09-22",
      "emailId":"Jason.Cook2@cognizant.com",
      "mobileNo":"6002789426",
      "offers": [ //array of object of offers for 114861]
   },
   ...and so on
]

获得上述结果集;我在这里使用了concatMap(尝试过mergeMap):

this.commonService.getAllCustomers().pipe(
      concatMap(response => {
        return this.commonService.fetchCustomerOffers(response['customerId']).pipe(
          map(d => {
            response['offers'] = d;
            return response;
          }),
        );
      })
    ).subscribe((res) => {
      console.log(res);

    });

但上面的代码只运行一次..不适用于所有customerId。 请帮助。我创建了stackblitz。

1 个答案:

答案 0 :(得分:1)

你可以使用customerId使每个元素与sejarstely一起发布。在这种情况下,它将按预期工作

   this.allData = this.commonService.getAllCustomers().pipe(
      mergeAll(),
      concatMap(response => {
        return this.commonService.fetchCustomerOffers(response['customerId']).pipe(
          map(d => {
            response['offers'] = d;
            return response;
          }),
        );
      }),
      scan((x, next) => x.concat([next]), [])
    )

请参阅here