RxJS Stream with conditions

resource1$ = hash1$.map( (renew: boolean) => renew ? http1$ : Observable.empty() );
resource2$ = hash2$.map( (renew: boolean) => renew ? http2$ : Observable.empty() );

sync$ = Observable.forkJoin(resource1$, resource2$);

sync$.subscribe( () => console.log('Sync done!), (err) => console.log('Sync failed!') );

Hello there, Upon beginning my application, I have several resources that need to be synchronized from an API. My goal is to sync them concurrently and check if synchronization is needed by sending a HEAD request first and comparing the X-HASH header with previously stored data.

For instance, hash1$ performs a HEAD request, compares hashes, and returns true or false accordingly.

I'm encountering an issue where if resource1$ returns Observable.empty, all streams in sync$ are canceled... however, I am still unsure why this behavior occurs.

Answer №1

When using forkJoin, it is essential that all source Observables emit at least one item and complete. If you utilize Observable.empty(), only the completion notification is sent, preventing forkJoin from emitting.

To address this issue, consider the following approach:

resource1$ = hash1$.map((renew: boolean) => renew ? http1$ : Observable.of(false));
resource2$ = hash2$.map((renew: boolean) => renew ? http2$ : Observable.of(false));

sync$ = Observable.forkJoin(resource1$, resource2$)
  .filter(results => results[0] && results[1]); // Add your desired condition here

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

"Positioning a Snackbar Message in the Center of the Screen in Angular: A Step-by-Step

I have a snackbar that I am displaying on button click. Here is the button: .html <button mat-icon-button (click)="UpdateCandidateData(row)" matTooltip="Save Changes" matTooltipPosition="left" color=" ...

Sending data to child component in Angular 2

Is there a way to seamlessly pass attributes from wrapper component to nested component? When we have const FIRST_PARTY_OWN_INPUTS = [...]; const FIRST_PARTY_PASSTHROUGH_INPUTS = ['all', 'attrs', 'are', 'passed']; ...

Upcoming Authentication Update: Enhancing User Profile with Additional Data Points

I recently encountered an issue with my typescript application that uses Next Auth v4 along with GithubProvider and MongoDBAdapter. I needed to add a new field called role to the User schema. Researching online, most solutions suggested adding a function ...

Tips for displaying or concealing a div when hovering over a kendo-menu-item in Angular 8

I am seeking a way to conceal a specific div element upon hovering over a kendo-menu-item within an angular 8 project. Specifically, I would like to hide the div with the class "nav-flyout" when hovering over the kendo-menu-item labeled "what we do". Belo ...

Ng2-smart-table is experiencing difficulty showing date and time values when used on Internet Explorer

In my Angular 7 application, I am utilizing ng2-smart-table. Within the table, I have incorporated the owl-datetime picker for selecting date and time values to be added to the database. The data is retrieved from the backend in an array format and then d ...

Stop additional properties from being added to a typescript interface when converting JSON strings

Currently, I am developing an extension for Arduino on VSCode and facing an issue with a section of my code. To load the project's configuration, I am accessing a .json file located in the .vscode folder. While ideally, the user should not manually ed ...

What is the reason behind the existence of the "/path1/(<outlet-name>:'path2')" in Angular 4 Router?

Is the use of URLs like "/services/55/(section:'data')" a method to link named outlets and paths together? I am confused as to why it couldn't just be simplified to "/services/55/data" when there is already a Route set up with the outlet pro ...

What causes the "node: bad option" error to occur when I include a custom flag in the nodejs command line within an Angular 9 application?

Seeking assistance with adding a custom flag to the npm start command in an Angular 9 project. The goal is to intercept proxy requests within the local server and manipulate data. However, encountering the "node: bad option" error consistently. Looking for ...

An Angular module downloaded from npm seems to be lacking the required @NgModule declaration

There seems to be a missing @NgModule and @Directive declarations in an NPM module, even though they exist in the source code on Github. This is causing an issue with importing a directive for databinding from an HTML attribute. I am attempting to utilize ...

Is there a way to switch from default export to regular export in TypeScript?

After reading this article and this other one, I came to the conclusion that default export may not be the best approach. However, while trying to refactor my code, I encountered an issue with some variables/objects/functions that were not clearly defined ...

Extract keys from a list of interface keys to create a sub-list based on the type of value

Issue Can the keys that map to a specified value type be extracted from a TypeScript interface treated as a map? For example, consider the WindowEventMap in lib.dom.d.ts... interface WindowEventMap extends GlobalEventHandlersEventMap, WindowEventHan ...

Is there a sweet TypeScript class constructor that can take in its own instance as an argument?

I have a scenario where I need to read in instances of Todo from a CSV file. The issue is that Papaparse does not handle dynamic conversion on dates, so I'm currently dropping the object into its own constructor to do the conversion: class Todo { ...

Storing JSON data in a variable using .subscribe is not possible in Angular

Currently, I am encountering an issue where I cannot successfully store the specific data obtained from a Post request into a variable. How can I resolve this and ensure that only the desired data is stored? After making a Post request and receiving back ...

Using an array of functions in Typescript: A simple guide

The code below shows that onResizeWindowHandles is currently of type any, but it should be an array of functions: export default class PageLayoutManager { private $Window: JQuery<Window>; private onResizeWindowHandlers: any; constructor () { ...

How can you retrieve the user that is currently signed in using AngularFire and Firebase Authentication in Angular?

If you're working with Angular and trying to access the currently signed-in user through Firebase Auth, you may encounter some difficulties. Here's a snippet of code provided in the Firebase Auth documentation that demonstrates how to get the sig ...

Following the execution of the ng build command, an error occurred stating 'entry not found'

After successfully building my project using the command "ng build --prod" or "ng build --prod --base-href ./", and running it on a web server without any issues, I encountered an error whenever I refreshed the page (F5). The error message appears as shown ...

Ways to retrieve the initial 4 elements from an array or class organized by their price entries in ascending order

Let's say we have an array of objects representing products: Products: Product[] = [ { id: 1, name: 'Milk', price: '1' }, { id: 2, name: 'Flour', price: '20' }, { id: 3, name: 'Jeans', pri ...

Unique styling implementation for element situated underneath Angular 6 router-outlet

I'm currently working on implementing router transitions in my Angular application, and I've encountered an unusual problem. The styling for the router-outlet element is being applied to the element that comes after it in the DOM hierarchy. Here ...

Implement a uniform CSS design across all elements within an Angular 2 application

I am trying to make use of some basic and reusable CSS rules in my Angular application, such as: .ng-invalid { border-left: 5px solid #a94442; } .ng-valid { border-left: 5px solid #42A948; } However, I want these rules to be applied to all compo ...

Tips for resolving text center alignment problems along with other elements when hovering

When hovering over each ul li element, a new element is added to the right side of the text. The alignment of the text is centered by default, but upon hover, the alignment changes when the new element is added. However, the issue is that the alignment s ...