Explore the functionalities of RxJS filter operators by applying them to a stream of arrays

Is it possible to work with a stream of arrays, such as filtering, and then emit the arrays again without concatenating the elements of the arrays or using regular array operators? For example, if I have an observable containing a single array, I can perform the following actions:

const MINWEIGHT = 15;

interface fruit {
  name: string;
  weight: number;
}

let apple: fruit = { name: "apple", weight: 2 };
let orange: fruit = { name: "orange", weight: 20 };

let fruitBasket1 = [apple, orange, orange];
let fruitBasket2 = [apple, apple, apple];

let sub = new Subject<fruit[]>();

sub
  .asObservable()
  .pipe(
    concatMap(x => x),
    filter(x => x.weight > MINWEIGHT),
    toArray()
  )
  .subscribe(console.log); // result: [ orange, orange];

sub.next(fruitBasket1);
sub.complete();

If sub.complete() is not called and there are multiple emissions of fruit[] (e.g. fruitBasket2), can the observable emit two arrays ([orange, orange], [orange]) without using regular array operators? While it's easily achievable with map (RxJS) followed by filter (array operator), I am interested in knowing if it can be done solely using RxJS operators.

Answer №1

Here is a potential solution for your problem

observable
  .asObservable()
  .pipe(
    concatMap(item =>
      from(item).pipe(
        filter(item => item.weight > MINWEIGHT),
        toArray()
      )
    )
  )
  .subscribe(result => console.log(result));

The main concept here is to transform each array emitted by the source into a stream using the from operator. Then, apply the rxjs filter and toArray operations on this stream for each individual array.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to specifically target the MUI paper component within the select style without relying on the SX props?

I have been experimenting with styling the Select MUI component using the styled function. I am looking to create a reusable style and move away from using sx. Despite trying various methods, I am struggling to identify the correct class in order to direct ...

Issue: (SystemJS) the exports variable is not defined

In the process of developing a .net core mvc + angular application, I encountered an interesting situation. The MVC framework handles user management, and Angular takes over when users navigate to specific areas of the application. Initially, I integrated ...

Is there any way I can verify the invocation of signOut in this Jest test case?

I am attempting to perform testing on my home page within a next app. However, I have encountered an issue with a button in the Home component that triggers a logout firebase function. Despite my attempts to mock this function and verify whether or not i ...

What could be the reason for the crash caused by ngModel?

The usage of [(ngModel)] within a *ngFor-Loop is causing an endless loop and crashing the browser. This is how my HTML looks: <div class="container"> <div class="row" *ngFor="let item of controlSystemTargetViewModel.values; let index = i ...

Images with spaces in their names are failing to load in React Native

I am currently trying to utilize an image within my react native application. At this point, my code is very minimal. The following code snippet is all I have for now: import React from 'react'; import { ScrollView, View, Text } from 'reac ...

Which is better for storing a collection of Components in a Service: Array or QueryList?

I have developed a PopupService with the following structure: export class PopupService { popups: PopupComponent[] = []; open(popup: PopupComponent) { this.popups.forEach(popup => popup.active = false); popup.active = true; } close(p ...

Reactive forms in Angular do not refresh or update automatically when a new error is added

Upon initializing my FormGroup in the ngOnInit() method, I invoke a validator function to ensure that the password and confirmPassword fields match. This is how it looks in TypeScript: regForm: FormGroup; constructor() { } ngOnInit() { this.regFo ...

In what scenarios would it be more advantageous to utilize ngStyle over creating a custom directive?

I had the need to dynamically change the width of a column, so I created a unique custom directive for that specific purpose: @Directive({ selector: '[rq-column-size]' }) export class ColumnSizeDirective { @Input('rq-column-size') ...

The 'checked' property cannot be bound to 'mat-button-toggle' as it is not recognized as a valid property in Angular 9

I am encountering an issue with my Angular 9 application. I have integrated angular-material and imported the MatCheckboxModule correctly in the module. Here is the version of the material package I am using: "@angular/material": "^10.2.0&q ...

Angular application seamlessly connects with Nodejs application

In my Node.js application, I utilized Express generated by express generator and implemented handlebars as the view engine. The application operates smoothly on port 3000. The defined routes in Express include: ... app.use('/', index); app.use( ...

Refreshing the page causes TypeScript Redux to lose its state

custom/reducer/shoppingReducer.ts import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { ShoppingReducerInitialState } from "../../types/reducer-types"; import { ProductItem, ShippingDetails } from "../../types/typ ...

Is there a way to selectively filter and display certain data in an Angular data table?

https://i.sstatic.net/0N3OZ.jpg I am currently working on a project using Angular 7 frameworks that involves dealing with large amounts of data. One of the tasks is to filter out trial units based on the 'userName' field in the raw data. I have ...

Transforming a current angular 2 project to incorporate angular CLI

I was working on a project which wasn't set up using the 'ng new' command, but rather I followed the steps outlined in the quickstart guide. However, whenever I try to use an angular CLI command like 'ng generate', I keep getting t ...

Retrieve the dimensions of an image once rendering is complete, using Angular

I'm currently working on obtaining the rendered size of an image within a component. By utilizing the (load) event, I can capture the size of the image as it appears at that particular moment (pic1), as well as its "final" size after the page has fini ...

challenges with template inheritance: when one template takes precedence over another

I have encountered an issue with my two HTML templates, login.html and signup.html. Both of these files inherit from the base.html file, but there seems to be a problem where one file is overriding the title and content of the other. So when I visit /login ...

Safari does not support RequestAnimationFrame in Angular 4

I'm currently working with material design in an Angular 4 project. However, I've encountered an issue where the project does not load properly on Safari due to an error related to RequestAnimationFrame. Does anyone know how to fix this problem? ...

Ionic 6 prioritizes enhanced accessibility by implementing toast blocks that divert attention away from input fields

Scenario: My form is basic, but when the user tries to submit it with invalid inputs, I show a toast message with an error. Issue: Since upgrading to Ionic 6, I noticed that while the error toast is visible, I am unable to focus on any input fields until ...

Merging two arrays of objects from the same response in JavaScript

How can I efficiently merge two arrays of objects from the same response? let data = [{ "testLevel":"mid", "testId":"m-001", "majorCourse": [ { "courseName":"C++" ...

Guide on incorporating Paddle into your SvelteKit project

I'm struggling to implement a Paddle Inline Checkout in SvelteKit. Every time I try, I keep encountering the error message Name Paddle not found. It seems like the script is not functioning properly. Console Error: Uncaught (in promise) ReferenceErro ...

Determine if the input value is an integer using a custom validator in Angular 2

Looking for a way to validate integer inputs in an Angular2 project? I experimented with using Number(control.value), but it returns 0 for empty fields, which is not ideal. Another method I tried was parseInt(control.value,10), but it ignores spaces. For ...