Is it feasible to utilize forkJoin in a similar manner to concat?

I am faced with a scenario where I have two observables - observableA and observableB.

My goal is to create an observable that triggers only after both observableA and observableB have completed. Additionally, I want to subscribe to observableB only once observableA has finished.

Although I attempted the following code snippet, it subscribes to both observableA and observableB simultaneously:

forkJoin(observableA, observableB).subscribe(([resultA, resultB])=>{
    // ...
})

To achieve the desired outcome, I had success with this alternative approach:

observableA.subscribe(resultA => {
    observableB.subscribe(resultB => {
        // ...
    })
})

Answer №1

If you are searching for a solution, consider using mergeMap, switchMap, or ConcatMap.

 observable1$.pipe(
        mergeMap(value=>  observable2$.pipe( 
                mergeMap(value=> observable3$.pipe(
                       map(c=> {return c})))
        ))).subscribe(value=>console.log)
      }

In this scenario, observable 1 is executed first, followed by 2 & 3. This approach should meet your requirements as well.

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

Can we split the PHP Photo Gallery into a second page after displaying 12 images?

I recently developed a simple PHP photo gallery for my website that pulls data from a MySQL database. By using a while loop, I am able to display three images (from ID 1 to 3) in a single row, continuing this pattern until a total of 12 images are shown. ...

What is the reason behind Istanbul's code coverage reporting a switch statement as uncovered even though all conditional paths are covered?

Within my node.js application, there is a class that includes a getter method with a significant switch statement. Rather than the simple example provided below, this switch statement contains numerous unreleased product-specific values replacing 'a&a ...

Choose a new image by confirming your selection with a dialog box

I have a collection of images displayed in a grid, and I want to be able to select one of them to update the value with the chosen image. Before proceeding with the update, I need a confirmation prompt to ensure the user wants to proceed or cancel the acti ...

The Angular custom modal service is malfunctioning as the component is not getting the necessary updates

As I develop a service in Angular to display components inside a modal, I have encountered an issue. After injecting the component content into the modal and adding it to the page's HTML, the functionality within the component seems to be affected. F ...

Polymer custom components and Polymer motion recognition techniques

Looking to implement a listener event on a Polymer custom element using Polymer-gestures. Here is a snippet of my code: - my-custom-element.html <link rel="import" href="../polymer/polymer.html"> <polymer-element name="my-custom-element" attri ...

Custom container width causes animation to crash when scrolling

I'm having trouble with my header. When the containers change with scrolling, an animation takes place. Everything works fine with native Bootstrap CSS, but when I customize the width of the container in my custom CSS (the width set to 1140px), the an ...

Triggering successive jQuery confirm boxes once the previous one has finished processing

I am facing an issue with my API call response where I receive an array and need to open jQuery Confirm one by one for each item in the response. The problem is that they all open at once. Below is the code snippet: axios.post('/orders/ask-for-or ...

Error encountered: AxiosError - Request unsuccessful with status code 401 in next.js

My current project uses Next.js, and I've implemented an Axios interceptor to catch rejected promises. However, when there is a server-specific error that requires my attention, Next.js displays the error like this: https://i.sstatic.net/HHhD2.png B ...

Converting a basic XMLHttpRequest or XDomainRequest into a custom-made jQuery Deferred object

Can a raw XMLHttpRequest or XDomainRequest be converted into a jQuery Deferred object (or encapsulated within one)? By "raw", I mean the object is instantiated directly using new XMLHttpRequest() or new XDomainRequest(), rather than utilizing jQuery' ...

Get real-time input values

Struggling to retrieve input value in real-time? The goal is to dynamically update the bottom buttons. The first X should match the number of carrots specified in the input above, and the second X will be calculated by a script. The key is to ensure that ...

Tips on creating a script for detecting changes in the table element's rows and columns with the specified data values

I have a div-based drop-down with its value stored in TD[data-value]. I am looking to write a script that will trigger when the TD data-value changes. Here is the format of the TD: <td data-value="some-id"> <div class="dropdown">some elements& ...

Unable to automatically prompt the button inside the iframe

In this scenario, an Iframe is automatically generated by a JavaScript script. I am looking to simulate a click by triggering a button, but unfortunately, it is not working as expected. You can view the code on JSFiddle. I have attempted various approache ...

Encountering an Error with "Access-Control-Allow-Origin" Request While Trying to Access the API

I'm currently facing an issue with fetching data from the Rescue Time API. My request is made in a JavaScript file using the jQuery get() method. Below is the snippet of JavaScript code related to the API GET request: $.get('https://www.rescueti ...

Route parameters do not function correctly with computed properties

I'm facing an issue with my getter function that stores all products. When I try to retrieve a single product dynamically based on this.$route.params.id, it doesn't return any value. The code works fine when I navigate to a specific product, but ...

What is the best way to combine the elements of two arrays within a v-for loop?

Within my code, I have defined two arrays: users and projects. Each array contains unique numbers as IDs. A project can be owned by multiple users, so in the projects array, there is an array of user IDs named ownersId that corresponds to the id of users i ...

Ways to dynamically update the content of an HTML table without the need to reload the page

I'm currently working on an HTML table that retrieves data from a database and includes a button for deleting selected records. Here is what the table layout looks like: name phone links john 6562 link1 link2 link3 ___________ ...

Jade Compilation with Gulp

Currently utilizing gulp-jade, I have encountered an error with a particular template: 557| 558| > 559| 560| .tabs-wrap(ng-show="eventExists"): .contain-center 561| 562| #room-tabs-contain.contain-disable.contain: .contain-center unexpec ...

When coding in JavaScript, the value of "this" becomes undefined within a class function

I'm facing an issue with my TypeScript class that contains all my Express page functions. When I try to access the class member variable using this, I get an 'undefined' error: class CPages { private Version: string; constructor(ver ...

What kind of interference occurs between the sibling components when a div with ng-if is present in Angular?

I've been troubleshooting for hours to figure out why the Angular elements in one div suddenly stopped working. After some investigation, I realized that a sibling div with an ng-if="someVar" was causing the issue. Currently, when someVar is true, the ...

The scripts are mistakenly interpreted as stylesheets, but are actually being transferred with the MIME type text/html

Encountering two console warnings while using Chrome: Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://domain/". domain/:11 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://domain/". ...