Angular 8 delivers an observable as a result following a series of asynchronous requests

I am working on a simple function that executes 3 asynchronous functions in sequence:

fetchData() {
    this.fetchUsers('2')
        .pipe(
        flatMap((data: any) => {  
            return this.fetchPosts(data.id);
        }),
        flatMap((data: any) => {            
            return this.fetchPosts(data[0].userId);
        })
        ).subscribe(results => {    
        return new Observable((observer) => {
        observer.next(results);
        observer.complete();
        });
    });
}

I am looking for a way to trigger something like: this.fetchData.subscribe() once all 3 flatMaps are done. I believe I need to make the fetchData() function return an observable, which I attempted at the end of the code but it's not functioning correctly and I can't call .subscribe on the fetchData() function.

Answer №1

Here is a possible solution to your issue:

Check out the working demo

retrieveData() {
    return this.fetchUsers('2')
      .pipe(
        flatMap((result: any) => {  
          return this.retrievePosts(result.id);
        }),
        flatMap((result: any) => {            
          return this.retrievePosts(result[0].userId);
        })
      )
  }

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

Issue with collecting data in Meteor Collection

After making some edits to another file and increasing the complexity of my application, a tracker function that was previously working fine is now experiencing issues. It is no longer returning any data for vrLoan fundingData This is a snippet of my c ...

Executing a custom object function in AngularJS by using the ng-click directive

As I navigate my way through AngularJS, I find myself grappling with the concept of calling a custom method of an object and wonder if there's a simpler approach: https://jsfiddle.net/f4ew9csr/3/ <div ng-app="myApp" ng-controller="myCtrl as myCtr ...

What is causing the error message 'undefined is not a function' to appear in my code?

Struggling to send a file in response to a GET request with express.js. I created a basic FileManager class to manage file requests, yet encountering an error of 'undefined is not a function' when calling new FileManager() Here's my approac ...

remain on the multi drop down page for a specified duration

I have created a dropdown menu with a second level drop-down page that is a form. Now, I want the second level drop-down page to stay open longer, so I have used the following JavaScript code: <script> var timer; $(".parent").on("mouseover", functio ...

Verify if the program is operating on a server or locally

My current project involves a website with a game client and a server that communicate via sockets. The issue I'm facing is how to set the socket url depending on whether the code is running on the server or my local PC. During testing and debugging, ...

Ways to customize a bot's status based on the time of day

I'm currently working on enhancing my discord bot by having its status change every hour for a more dynamic user experience. However, I'm facing challenges with JavaScript dates. Can anyone provide some guidance? Below is the snippet of code I ha ...

How to create a blinking effect for buttons in an Angular app with ng-if or ng-show

I've come across the same issue in two separate angular projects I've been involved with, but have not been able to find any discussion on this particular problem. This leads me to believe that there may be something I am overlooking. Let's ...

Angular2 scripts are failing to load in the web browser

Setting up my index page has been more challenging than I anticipated. Take a look at my browser: https://i.stack.imgur.com/L4b6o.png Here is the index page I'm struggling with: https://i.stack.imgur.com/Op6lG.png I am completely stumped this tim ...

Dispatch is functioning properly, however the state remains unchanged

I'm currently developing an application that utilizes redux for state management. In a particular scenario, I need to update the state. Here is how my initial state and reducer function are set up: import { createSlice } from '@reduxjs/toolkit&a ...

What is the best way to attach a tag or label onto multiple objects so that it remains facing the camera whenever the user interacts with the objects?

My goal is to create a tag or label that always faces the camera when a user clicks on an object, even if that object is rotated. How can I achieve this? I've been advised to use an Orthogonal camera, but I'm not sure how to do that. Additionall ...

What is the most efficient and hygienic method for storing text content in JavaScript/DOM?

Typically, I encounter version 1 in most cases. However, some of the open source projects I am involved with utilize version 2, and I have also utilized version 3 previously. Does anyone have a more sophisticated solution that is possibly more scalable? V ...

Exploring the properties of a file directory

As I try to access the d attribute of a path that was generated using Javascript, the output of printing the path element appears as follows: path class=​"coastline" d="M641.2565741281438,207.45837080935186L640.7046722156485,207.0278378856494L640.698 ...

What is the best way to create a general getter function in Typescript that supports multiple variations?

My goal is to create a method that acts as a getter, with the option of taking a parameter. This getter should allow access to an object of type T, and return either the entire object or a specific property of that object. The issue I am facing is definin ...

Discover the steps to linking a dropdown menu to a text input using HTML and JavaScript

I'm currently using Sublime and trying to link a dropdown menu with an input text using html, css, and javascript. When the user selects an option from the dropdown menu, I want the corresponding value to appear in the text input field. For example, i ...

The autocomplete feature fails to properly highlight the selected value from the dropdown menu and ends up selecting duplicate values

After working on creating a multiple select search dropdown using MUI, my API data was successfully transformed into the desired format named transformedSubLocationData. https://i.stack.imgur.com/ZrbQq.png 0: {label: 'Dialed Number 1', value: &a ...

Tips for utilizing jest.mock following the removal of @types/jest (^jest@24)

After upgrading from version 7 to version 8 of @angular-builders/jest, I followed the instructions provided in the migration guide which advised removing @types/jest since it now comes bundled with Jest v24. Additionally, changes were made to my tsconfig a ...

Obtaining the MapOptions object from a map using Google Maps API version 3

Previously in Google Maps api v2, you were able to retrieve map parameters like the type and zoom directly from the map object. However, in version 3, the setOptions method is used to configure parameters, but there is no equivalent method like getOption ...

Ensure Next.js retains the route when moving from one screen to another

I am currently facing a challenge in Next.js while creating a Dashboard. The root route for this dashboard would be: /dashboard/ Within this route, users can select different stores to access their respective dashboards. When a user clicks on a specific s ...

Populate the auto complete input box with items from a JSON encoded array

I have a PHP file that returns a JSON encoded array. I want to display the items from this JSON array in an autocomplete search box. In my search3.php file, I have the following code: <?php include 'db_connect.php'; $link = mysqli_connect($ho ...

how to toggle visibility of bootstrap accordion panel using jQuery

I have a bootstrap accordion that I want to customize. Specifically, I only want to enable a panel under specific conditions. The idea is for the second panel to be collapsible only when the first panel is valid. <div class="panel-group" id="accordion" ...