{"id":942,"date":"2023-05-12T05:00:00","date_gmt":"2023-05-12T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=942"},"modified":"2023-05-11T14:56:05","modified_gmt":"2023-05-11T21:56:05","slug":"mergemap-rxjs-operator","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/mergemap-rxjs-operator\/","title":{"rendered":"mergeMap RxJs operator"},"content":{"rendered":"\n

A few months back, we covered the switchMap<\/code> operator<\/a> from RxJs. Today, let’s look at a similar operator called mergeMap<\/code>:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

The marble diagram isn’t as obvious as it is for other operators, so let’s clarify what mergeMap<\/code> does:<\/p>\n\n\n\n

    \n
  • It takes values from an observable and maps them to another observable<\/li>\n\n\n\n
  • Then it allows us to combine the values from both observables into one new observable<\/li>\n<\/ul>\n\n\n\n

    What’s a real-life use case for mergeMap<\/code>?<\/strong><\/h2>\n\n\n\n

    Let’s say you want to display a list of products with their associated categories. The product information is stored in one API endpoint, and the category information is stored in another API endpoint. To display the list of products with their categories, you need to make a separate API call for each product to retrieve its category information.<\/p>\n\n\n\n

    You can use mergeMap<\/code> to combine the two API calls and merge the results into a single stream of data (product + category).<\/p>\n\n\n\n

    How is it different from switchMap<\/code>?<\/h2>\n\n\n\n

    mergeMap<\/code> differs from switchMap<\/code> in two important ways:<\/p>\n\n\n\n

      \n
    1. switchMap<\/code> only returns the data from observable #2 – mergeMap<\/code> returns data from both observable #1 and #2 and allows us to combine that data any way we want<\/li>\n\n\n\n
    2. switchMap<\/code> cancels observable #2 whenever observable #1 emits a new value, then re-creates another observable #2. mergeMap<\/code> doesn’t do that.<\/li>\n<\/ol>\n\n\n\n

      In other words, switchMap<\/code> is perfect when we want to chain asynchronous actions such as “user selects a new filter, then we request new data according to that filter” because if the user changes that filter again, we want to cancel the previous request and start a new one.<\/p>\n","protected":false},"excerpt":{"rendered":"

      A few months back, we covered the switchMap operator from RxJs. Today, let’s look at a similar operator called mergeMap: The marble diagram isn’t as obvious as it is for other operators, so let’s clarify what mergeMap does: What’s a real-life use case for mergeMap? Let’s say you want to display a list of products […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,10],"tags":[],"class_list":["post-942","post","type-post","status-publish","format-standard","hentry","category-operators","category-rxjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=942"}],"version-history":[{"count":5,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/942\/revisions"}],"predecessor-version":[{"id":948,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/942\/revisions\/948"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}