Learn how to utilize the combineLatest/zip operators to only respond to emissions from the second observable while disregarding emissions from the first observable

Question

Learn how to utilize the combineLatest/zip operators to only respond to emissions from the second observable while disregarding emissions from the first observable

Here's an example of how I'm initializing a property:

this.currentMapObject$ = zip(this.mapObjects$, this.currentMapObjectsIndex$,
      (mapObjects, index) => mapObjects[index]);

I want the value of this.currentMapObject$ to be emitted only when this.currentMapObjectsIndex$ emits and not when this.mapObjects$ emits.

Currently, it seems like this.currentMapObject$ will still emit if any property within an object in this.mapObjects$ changes. What I actually want is to ignore all changes in this.mapObjects$ and take only its current value, while still reacting to changes in this.currentMapObjectsIndex$

javascript angular typescript rxjs ngrx

Answer 1

Answer №1

It is important to utilize the withLatestFrom operator:

This operator combines the main Observable with other Observables to create a new Observable that calculates values based on the most recent values of each input, triggered only when the main Observable emits.

https://rxjs.dev/api/operators/withLatestFrom

Following @BizzyBob's recommendation:

this.updatedMapObject$ = this.updatedMapObjectsIndex$.pipe(
  withLatestFrom(this.mapObjects$),
  map(([index, mapObjects]) => {
    // perform operations here
  }
)

Answer 2

It is important to utilize the withLatestFrom operator:

This operator combines the main Observable with other Observables to create a new Observable that calculates values based on the most recent values of each input, triggered only when the main Observable emits.

https://rxjs.dev/api/operators/withLatestFrom

Following @BizzyBob's recommendation:

this.updatedMapObject$ = this.updatedMapObjectsIndex$.pipe(
  withLatestFrom(this.mapObjects$),
  map(([index, mapObjects]) => {
    // perform operations here
  }
)

Learn how to utilize the combineLatest/zip operators to only respond to emissions from the second observable while disregarding emissions from the first observable

Answer №1

Similar questions

Web pages that dynamically update without the need for reloading

Sending an object between two components without a direct parent-child connection

Encountering a problem with Nginx and WordPress where the admin-ajax.php is causing an issue when returning an AJAX result, leading to an error of Un

Exploring PHP cURL with the power of jQuery

A guide on utilizing the intl.formatRelativeTime() function effectively

In Vue.js, the properties of components are not defined

Angular - Exploring the process of creating a secondary standalone build for a specific section of an application

Creating a mandatory 'Select' dropdown field in Vue.js

What are the benefits of removing event listeners in Reactjs?

Transforming the inputted URL into a clickable hyperlink

The declaration of module 'DynamicTestModule' contains an unexpected value 'StateService'

Next.js deployments on Vercel are encountering issues with resolving local fonts

Tips for utilizing Jquery to manage a dropdown designed in button form

passing arguments during deferred resolve() and when() operations

Cease hover effect animation

Setting up Authorization for FETCH requests in NEXT.js using .env.local

What is the process in TypeScript for defining a custom variation of a generic function?

Exploring the directories: bundles, lib, lib-esm, and iife

Should the header include individual CSS and JS files, or should all code be contained within a single CSS and JS file?

Getting Angular 2 and Ionic 2 to play nice together: is it worth the effort?