Merge two observable streams to generate final array of object

Question

I have a HTTP service which returns me following data: (stackbitz)

[
   {
      "customerId":"114860",
      "customerName":"John Dyer",
      "dateOfBirth":"1987-07-19",
      "emailId":"[email protected]",
      "mobileNo":"6502789426"
   },
   {
      "customerId":"114861",
      "customerName":"Jason Cook",
      "dateOfBirth":"1988-09-22",
      "emailId":"[email protected]",
      "mobileNo":"6002789426"
   },
   ... and so on

]

After getting above response I want to make another HTTP call to fetch details corresponding to customerId which returns me following data(let's say for 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"
   }
]

Now I want to merge above two streams so that it will give me following result data :

 [  
   {  
      "customerId":"114860",
      "customerName":"John Dyer",
      "dateOfBirth":"1987-07-19",
      "emailId":"[email protected]",
      "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":"[email protected]",
      "mobileNo":"6002789426",
      "offers": [ //array of object of offers for 114861]
   },
   ...and so on
]

To obtain above result set; I used concatMap (tried mergeMap as well) here:

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);

    });

but above code run only once..not for all customerId. Kindly help. I have created stackblitz.

Oleksandr Poshtaruk · Accepted Answer · 2018-04-05 07:00:55Z

2

You can make each element with customerId to be emitted separstely wiyh mergeAll. In that case it will work as you expect

   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]), [])
    )

see here

edited Apr 5, 2018 at 7:00

answered Apr 5, 2018 at 6:27

Oleksandr Poshtaruk

2,20618 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1608841 Over a year ago

Thanks this works... Now I want to bind this result data set in HTML using async pipe but HTML is not binding giving error. please see this stackblitz stackblitz.com/edit/…

user1608841 Over a year ago

I removed subscribtion and i believe above function will return observable so binded with async pipe in *ngFor..

Oleksandr Poshtaruk Over a year ago

In that case we should accumulate all the emitted values in array with scan operator. I will correct my answer and slackblitz

Oleksandr Poshtaruk Over a year ago

mergeAll and other higher-order observables functions are reviewed also in my video course packtpub.com/web-development/hands-rxjs-web-development-video

Collectives™ on Stack Overflow

Merge two observable streams to generate final array of object

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related