Screen the array with a condition that can be observed

Question

Screen the array with a condition that can be observed

I need to retrieve an array of objects through a request. Each object in the array has an id, which I then use to make another request. After receiving the result, I want to filter the original array based on this information. Here is a simplified example:

function getAllObjects(): Observable<{ id: number }[]> {
  return of([
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
  ]);
}

function checkObject(obj): Observable<boolean> {
  return of(obj.id % 2 === 0);
}

getAllObjects().pipe(
  // TODO
).subscribe(console.log); // My goal is to only display objects that pass the async check

javascript angular typescript rxjs

Answer 1

Answer №1

Is this approach suitable for your needs?

retrieveAllItems().pipe(
  flatMap((arr) => arr),
  concatMap((item) => combineLatest([of(item), checkItem(item)])),
  filter(([_, result]) => result),
  map(([item]) => item),
  toArray(),
).subscribe(console.log);

Upon further review, I noticed that you have already found a solution. However, my method may not be much simpler as I initially thought. I assumed you were interested in a continuous stream of objects rather than receiving them as an array. Therefore, I included the conversion to an array using 'toArray' in my updated code.

Answer 2

Is this approach suitable for your needs?

retrieveAllItems().pipe(
  flatMap((arr) => arr),
  concatMap((item) => combineLatest([of(item), checkItem(item)])),
  filter(([_, result]) => result),
  map(([item]) => item),
  toArray(),
).subscribe(console.log);

Upon further review, I noticed that you have already found a solution. However, my method may not be much simpler as I initially thought. I assumed you were interested in a continuous stream of objects rather than receiving them as an array. Therefore, I included the conversion to an array using 'toArray' in my updated code.

Answer 3

Answer №2

An effective approach that may not be the most straightforward, but still gets the job done

getAllItems()
    .pipe(
        switchMap(array =>
            combineLatest(array
                .map(item =>
                    checkItem(item)
                        .pipe(
                            distinctUntilChanged(),
                            map(result => result ? item : null)
                        )
                )
            )
        ),
        map(array => array.filter(item => item))
    )
    .subscribe(console.log);

Taking into consideration potential real-time modifications

function getAllItems(): Observable<{ id: number }[]> {
    return timer(0, 10000)
        .pipe(
            map(() => [
                { id: 1 },
                { id: 2 },
                { id: 3 },
                { id: 4 },
            ])
        );
}

function checkItem(item): Observable<boolean> {
    return timer(1000, 5000)
        .pipe(
            map(() => item.id % 2 === 0)
        );
}

Answer 4

An effective approach that may not be the most straightforward, but still gets the job done

getAllItems()
    .pipe(
        switchMap(array =>
            combineLatest(array
                .map(item =>
                    checkItem(item)
                        .pipe(
                            distinctUntilChanged(),
                            map(result => result ? item : null)
                        )
                )
            )
        ),
        map(array => array.filter(item => item))
    )
    .subscribe(console.log);

Taking into consideration potential real-time modifications

function getAllItems(): Observable<{ id: number }[]> {
    return timer(0, 10000)
        .pipe(
            map(() => [
                { id: 1 },
                { id: 2 },
                { id: 3 },
                { id: 4 },
            ])
        );
}

function checkItem(item): Observable<boolean> {
    return timer(1000, 5000)
        .pipe(
            map(() => item.id % 2 === 0)
        );
}

Answer 5

Answer №3

const objects$ = getAllObjects().pipe(concatAll());
const objectValidations$ = objects$.pipe(concatMap(checkObject));

zip(objects$, objectValidations$).pipe(
    filter(([, validated]) => validated),
    map(([obj,]) => obj),
    toArray()
).subscribe(console.log);

MODIFICATION: To enhance the efficiency of the previous solution, we can parallelize the "checks":

getAllObjects().pipe(
  concatAll(),
  mergeMap(obj => 
    checkObject(obj).pipe(
      map(isValid => isValid? obj : undefined),
      filter(Boolean),
    )
  ),
  toArray()
)

This modification is preferred because if the checkObject function is implemented with a delay as follows:

function checkObject(obj) {
  return of(obj.id % 2 === 0).pipe(delay(1000));
}

For n objects, the initial solution takes n seconds, while the updated solution only takes 1 second.

Answer 6

const objects$ = getAllObjects().pipe(concatAll());
const objectValidations$ = objects$.pipe(concatMap(checkObject));

zip(objects$, objectValidations$).pipe(
    filter(([, validated]) => validated),
    map(([obj,]) => obj),
    toArray()
).subscribe(console.log);

MODIFICATION: To enhance the efficiency of the previous solution, we can parallelize the "checks":

getAllObjects().pipe(
  concatAll(),
  mergeMap(obj => 
    checkObject(obj).pipe(
      map(isValid => isValid? obj : undefined),
      filter(Boolean),
    )
  ),
  toArray()
)

This modification is preferred because if the checkObject function is implemented with a delay as follows:

function checkObject(obj) {
  return of(obj.id % 2 === 0).pipe(delay(1000));
}

For n objects, the initial solution takes n seconds, while the updated solution only takes 1 second.

Answer 7

Answer №4

import { map, filter } from 'rxjs/operators';


map(items => items.filter(item => item.id % 2 === 0)),
filter(items => items && items.length > 0)

Start by applying the map function to filter the array as usual. Then ensure that you avoid null or empty arrays by using the filter function, which prevents the subscription from being triggered if the result of the map operation is null or empty.

Answer 8

import { map, filter } from 'rxjs/operators';


map(items => items.filter(item => item.id % 2 === 0)),
filter(items => items && items.length > 0)

Start by applying the map function to filter the array as usual. Then ensure that you avoid null or empty arrays by using the filter function, which prevents the subscription from being triggered if the result of the map operation is null or empty.

Screen the array with a condition that can be observed

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I am looking to organize my content by creating categories such as How, When, and Why for different videos. How can I achieve this for a large amount of text

Creating an app for sending text messages and making video calls with Spring Boot technology

Issue with jQuery element disappearing as it scrolls out of view

Django enables anonymous Ajax requests to reach a Generic View

Is there a way to validate user input in the front-end using my ANTLR grammar implemented in the back-end?

Error in jQuery: Null property causing TypeError when reading 'text'

Passing a table value to a PHP script using JQuery on click event

Stylesheets from node_modules cannot be imported without using the tilde (~) character

The EJS is throwing an error because it cannot define the property "round" on an undefined object

Can someone guide me on how to make an array filled with dates using Javascript?

Monitoring the flow of data between Angular JS resources and the promise responses

Ways to modify the attribute of an element in an ImmutableList({}) nested within Immutable.Map({})

Echarts: scatter plots linked with a line to the axis (resembling the PACF diagram)

Firebase updates are not causing React components to update as expected

Establish the project-wide standard font family

Troubleshooting Angular 2 with TypeScript: Issue with view not refreshing after variable is updated in response handler

When utilizing *ngIf in Angular 2, the issue of #elmentRef remaining undefined still persists

Calculate the difference between the current value and the previous value

Creating several Doughnut Charts within a single Canvas using Chart.js

Is there any benefit to fetching data in `{#await}` or `onMount` instead of `load` in SvelteKit, especially considering the impact on `+server`?