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

The click event fails to trigger on dynamically loaded Ajax content

How to use jQuery to change the background color of HTML table cells based on their content value

Having trouble with jQuery show/hide not functioning properly?

The automatic form completion feature in JavaScript failed to function

The hierarchical structure in the DOM that mirrors an HTML table

Tips for optimizing search functionality in Angular to prevent loading all data at once

What is the best way to convert this tsc script into an npm script in package.json?

What is the procedure for matching paths containing /lang using the express middleware?

Changing the user object stored in the database within the next authentication process following registration

How is it possible for the igx-expansion-panel to close when there is a nested angular accordion present?

Remove HTML tags from a table cell containing a combination of radio buttons and labels

Executing Grunt: Setting up a dual Connect and Express server to operate on one port

Having trouble with jQuery on my webpage

The component encounters a transformation in which prop values shift to undefined

A guide to implementing Typescript Generics in modifier functions

Angular allows you to easily upload multiple files at once

Resetting the datetime-local input to its initial value (ngModel) in template forms

What is the best way to choose CSS class attributes using Mootools and the getStyle()

Elements Fail to Display After Updating State with UseState

What is the reason behind V8's perplexing error notification?