Is it possible to wait for two Observables and then create a promise for a new Observable?

Currently, I am dealing with two different types of Observables and my goal is to wait for both of them to emit at least once before immediately returning a promise of a third Observable with a different return type.

This is what I have so far:

return Observable.forkJoin([$A, $B])
    .do(() => {
        return $C;
    })
    .toPromise()
    .then(result => result);

In this code snippet, $A represents an Observable<AType>, $B represents an Observable<BType>. However, the specific results of these observables are not important, I simply need to know when they have completed. After that, I want to convert $C into a Promise<CType> using toPromise.

Despite my efforts, it seems like this implementation is not functioning as expected. It appears to be returning a Promise<Void[]> or an Observable<Void[][]>, but I am not entirely sure how to troubleshoot this issue. My assumption is that forkJoin is executing the first two promises and then correctly waiting for both to resolve, it's just the return type causing confusion.

Answer №1

While you're on the right track, it's important to note that using the do operator only triggers side-effects without modifying the chain itself.

To achieve your goal of returning a Promise, consider utilizing the concatMap function (or alternatively, mergeMap) since it waits for the inner Promise to resolve before returning its value. In this case, you can still incorporate toPromise to convert the entire chain into a Promise:

return Observable.forkJoin([$A, $B])
    .concatMap(() => $C)
    .toPromise()
    .then(result => result);

Note: While it is true that both mergeMap and concatMap play their roles, the crux lies in the operation carried out by forkJoin. This function emits a single item (an array of the final emissions from each source Observable) after all sources complete. Therefore, whether you opt for mergeMap or concatMap, they will essentially extract and return the desired $C Promise.

Answer №2

execute (or preferably, trigger) is employed to manipulate the observed data without disrupting the sequence. It will produce the identical observable it operates on.

It is essential to transform your value into the fresh observable.

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

Exploring routing within a Higher Order Component in React Native

I am looking to implement a file existence check on every page of my app. The idea is that if a specific file exists, the user should be redirected to another page. One solution I have considered is using a Higher Order Component (HOC) for this purpose. A ...

A More Straightforward Approach to Unsubscribing from Observables in Angular 7

Is there a way to simplify the process of automatically unsubscribing from Observables when a component is destroyed using takeUntil? It becomes tedious having to repeat the same code in multiple components. I am looking for a solution that allows me to a ...

Guide to developing a versatile Icon Wrapper component for FontAwesome Icons in React that adapts to changing needs

I'm looking to develop a customized React Icon-Component where I can simply input the icon name as a string and have the icon display automatically. After following the guidelines provided here: https://fontawesome.com/docs/web/use-with/react/add-ico ...

Is there a way to display an array of data in separate mat-form-field components?

I am dealing with an array that stores 4 data points: [onHour, onMinute, offHour, offMinute]. I also have 4 elements that are not in an array and need to be repeated. <div class="on"> <mat-form-field appeara ...

In Typescript, convert an object into a different type while maintaining its keys in the resulting type

Imagine you have a code snippet like this type ResourceDecorator = (input: UserResourceDefinition) => DecoratedResourceDefinition const decorate: ResourceDecorator = ... const resources = decorate({ Book1: { resourceName: 'my-book', ...

Utilizing a Bootstrap Collapse component based on scrolling actions

I'm currently working on an Angular application that incorporates Bootstrap 5.2. Within this project, I have successfully implemented the Collapse component on a card, utilizing data attributes. However, my goal is to trigger the collapse of the card ...

Spying on an Angular service with additional parameters present

Is there a way to monitor and imitate a service using another service parameter? For instance, the new Authservice includes this parameter: export class AuthService{ constructor(public serviceAbcd: ServiceAbcd) {} This serves as an illustration withou ...

Is it possible to create a more concise and limited subtype from an already existing type?

Let's say I have the following type declarations: type Foo = 'a' | 'b' | 'c'; type Bar = 'a' | 'b' ; Can we define Bar as a subset of Foo? I know it's always possible to define Foo as a superse ...

Tips for displaying HTML content dynamically in React using TypeScript after setting a stateVariable

To render an HTML block after successfully setting a state variable, I have defined my state variables and functions below. The code snippet is as follows: const formService = new FormService(); const [appointmentDate, setAppointmentDate] = us ...

What is the best way to retrieve the selected values from a checkbox using Angular?

I am working on creating a dynamic checkbox from a list of cartoon data. Each checkbox represents a cartoon, and when selected, I need to be able to read the values in a TypeScript function. In my HTML file <div *ngFor="let cartoon of cartoonsDa ...

Mastering the art of incorporating if..then test flow in Cypress can elevate your testing

I need to create a test in Cypress that loads a page and checks if a modal opens within 5 seconds. If the modal opens, it should close it. If the modal does not open, the test should proceed to the specified testcase in the before block. How can I achiev ...

Guide to setting headers to application/json in Angular 2

I've been attempting to send an HTTP post request in Angular 2, but I'm facing difficulties setting the headers to content type application JSON. This is my current code: login(url, postdata) { var headers = new Headers({'Content-Type&a ...

Using TypeScript to specify a limited set of required fields

Can a custom type constraint be created to ensure that a type includes certain non-optional keys from an object, but not all keys? For instance: class Bar { key1: number key2: Object key3: <another type> } const Y = { key1: 'foo' ...

What is the correct way to utilize Array.reduce with Typescript?

My current approach looks something like this: [].reduce<GenericType>( (acc, { value, status, time }) => { if (time) { return { ...acc, bestValue: valu ...

The Angular Observable continues to show an array instead of a single string value

The project I am working on is a bit disorganized, so I will try to explain it as simply as possible. For context, the technologies being used include Angular, Spring, and Maven. However, I believe the only relevant part is Angular. My goal is to make a c ...

TypeB should utilize InterfaceA for best practice

I have the following TypeScript code snippet. interface InterfaceA { id: string; key: string; value: string | number; } type TypeB = null; const sample: TypeB = { id: '1' }; I am looking for simple and maintainable solutions where TypeB ...

Which module system is best suited for your tsconfig: commonjs, umd, or es6?

Which module should be specified in tsconfig, commonjs or es6? What factors should be considered when deciding? The output module needs to work on both the client and back ends. ...

Transferring files from one azure blob container to another

I am currently utilizing the @azure/storage-blob package to manage files within Azure. Within the same Azure storage account, I have two storage containers - one for source files and the other for destination files. My objective is to copy a file from th ...

Include a conditional statement in ng keypress

When a user types a specific value into a text input, I want to display a specific div. This is what my template looks like: <input type="text" id="jobTitle" (click)="autoCompleteClick()" (keypress)="autoCompleteKeypress()" name="autocomplete" place ...

Creating a task management application using Vue 3 Composition API and Typescript with reactivity

I am in the process of creating a simple todo list application using Vue 3 Composition API and TypeScript. Initially, I set up the function for my component to utilize the ref method to manage the reactivity of user input inserted into the listItems array. ...