A Practical Guide to Implementing exhaustMap in TypeScript with ReactiveX/rxjs 5

Is there a way to process an array where each value returns a Promise in the same order they're specified? For example, if I want to make multiple Ajax calls like this:

var array = [
    'http://example.org',
    'http://otherexample.org',
    'http://anotherexample.org',
];

A similar question has been raised on Stack Overflow: How can I use RxJs to hold off any requests for an AJAX call until the previous one resolves, which suggests using flatMapFirst.

While working with Angular2 (beta-15) in TypeScript, I discovered that flatMapFirst has been renamed to exhaustMap.

However, I couldn't find this operator in Observable.ts or in the bundled version of RxJS https://code.angularjs.org/2.0.0-beta.15/Rx.js.

So, is there a workaround for this issue? Should I consider using one of the build scripts listed in the package.json?

Just to clarify, I am working with the ReactiveX/rxjs library, not Reactive-Extensions/RxJS

typescriptangularreactive-programmingrxjs

Answer №1

Using the concatMap() operator solved the issue:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/concatMap';

var urls = [
  'https://example.com/api/data/1',
  'https://example.com/api/data/2',
  'https://example.com/api/data/3',
  'https://example.com/api/data/4',
  'https://example.com/api/data/5',
];     

Observable.from(this.urls)
  .concatMap(url => http.get(url))
  .subscribe(response => console.log(response.url))
;

The output in the console will be:

https://example.com/api/data/1
https://example.com/api/data/2
https://example.com/api/data/3
https://example.com/api/data/4
https://example.com/api/data/5

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

Angular 5 Image Upload - Transfer your images with ease

I am having trouble saving a simple post in firebase, especially with the image included. This is my current service implementation: uploadAndSave(item: any) { let post = { $key: item.key, title: item.title, description: item.description, url: '&a ...

typescriptfirebaseangular5firebase-storage

Having trouble capturing emitted events from a child component in Angular 2+?

I have a question as a beginner. I'm trying to send a message from the child component to the parent component but for some reason, it's not working. app.component.html <app-cart-component> [items]="rootItems" (outputItems)=&quo ...

angulartypescript

The Angular NgForm method form.resetForm does not seem to be resetting properly when dealing with arrays

I encountered an issue with my simple ngForm that was previously functioning well with string input and single select dropdowns. When I added a multi-select dropdown that introduces an array, I started facing a strange problem. Even after using form.formRe ...

angulartypescriptangular-forms

The powerful combination of Angular 6, NodeJS, and MongoDB creates a

Hi there. I've been searching around but couldn't find a solution to my problem. There are two similar unanswered questions. I'm new here, so any help with my final project would be greatly appreciated. After running ngForm, I encountered a ...

node.jsangularmongodbformspost

Sign up for the category that failed to assign a worth

Currently, I have a service that includes a getter and setter: // Service import { Subject } from 'rxjs'; export class MyService { public currentUser: any = new Subject(); ... there is a function where I call setCurrent and assign value ...

angularrxjs

Encountering a console error in a TypeScript Express app when using MUI and Preact: "Unexpected prop `children` passed to `InnerThemeProvider`, was expecting a ReactNode."

I'm working on integrating MUI with a Preact app. In VSCode, everything seems to be set up correctly, but when I try to view it in the browser, nothing renders and I get this console error: react-jsx-runtime.development.js:87 Warning: Failed prop type ...

typescriptwebpackmaterial-uipreact

Retrieve the injectable value when importing SubModule into the App Module

Let me provide some background information... I have a feature module that requires a string value to be passed to its forRoot static method when imported in app.module.ts, like this: @NgModule({ declarations: [ /* ... */ ], imports: [ My ...

angular

What is the reason behind Angular's repeat filter only being able to access its own element within the return function?

I have successfully implemented some Angular code that is working, however, I am struggling to understand why it works. Coming from a C Sharp background and being new to JS and Typescript. <tr ng-repeat="colleague in Model.FilteredColleagueListModel | ...

javascriptangularjstypescript

Specify the return type of the Prisma ORM "findUnique" function

As a newcomer to TypeScript, I find the concept of type-hinting quite strong but also overwhelming at times. In my TypeScript project using express and Prisma ORM, I've encountered an issue with the result of the findUnique method. Let me elaborate. ...

typescriptprismatype-hinting

Troubleshooting puppeteer error: "Property 'contentFrame' of null cannot be read"

I've encountered a bug while trying to request an API that I've implemented. After using one of the endpoints, it throws the following error, as shown below. Is there any way to handle this error? Error message: TypeError: Cannot read property ...

typescriptiframepuppeteer

Ionic storage is unable to assign a number as a string

My goal is to store all numbers retrieved from the function getWarrentsNumber() in ionic storage, but I encountered an error. Error: The argument of type "number" cannot be assigned to type 'string'. this.storage.set(this.NumberOfAssignedWarren ...

angulartypescriptionic-framework

Discover the best way to cycle through bootsrap modal dialogs using angular

Within my component.ts file, there exists an array: dummyData = ['1', '2', '3']; The objective is to iterate through this array and generate 3 modals displaying values 1, 2, and 3 respectively. Here's a snippet of the ...

angularbootstrap-modal

Updating the old version of an Angular app on Azure using VS Code can be challenging as the deployment process may not automatically replace

After making changes to my Angular App and testing it locally with 'ng serve', I used 'ng build' to generate artifacts in the 'dist' directory. Utilizing the Azure App Services extension in VS code, I selected the 'dist&a ...

angularazuredeploymentazure-web-app-service

Maximizing the potential of Angular forms through native FormData

Currently, I am revisiting an older project that still uses traditional methods for form submission. The HTML includes a form element with defined method and action. My goal is to submit the form in the old-fashioned way using the action attribute to post ...

javascripthtmlangularforms

Ensure that the test files include the export default module

I'm currently facing an issue when trying to import a module in my test files, specifically when it's exported as a default module. My code looks like this: server.ts import { MyClass } from './myClass'; /* Other code here */ const ...

javascriptnode.jstypescriptecmascript-6mocha.js

How can I load a separate component.html file using a component.ts file?

Hey there, I'm a beginner with Angular and I have a question about loading a different home.component.html file from a method within books.component.ts. Here's the code snippet from my books.component.ts file: import { Component, OnInit } from ...

node.jsangulartypescriptroutes

Angular Material: Enable Window Dragging Across Multiple Monitors

Exploring the usage of Angular Material Dialog or any other Popup Window Component. The functionality is mostly working as expected, with the exception of the last point. a) The original screen should not have a grey overlay, b) Users should be able to i ...

angulartypescriptangular-materialangular8material-dialog

Modify the title and go back dynamically in the document

I am currently working on a timer app where I want to dynamically change the document title. The app features a countdown timer, and during the countdown, I was able to display the timer in the document title successfully. However, once the countdown is co ...

angulartypescript

The NgZone reference error caused the prerendering to fail

I am facing challenges with the implementation of NgZones. Despite defining NgZone, I keep encountering this error: "NodeInvocationException: Prerendering failed because of error: ReferenceError: NgZone is not defined" Below is my app.error-handle.ts file ...

typescriptvisual-studio-codeangular2-servicesasp.net-core-2.0angular2-zone

Troubleshooting TypeScript while making a request to a web API from Angular

Just starting out with angular and trying to make a web API call. When I use http.get, I see a message loading... in my browser indicating there might be an error. Here's the code snippet: getProjectDetails() { return this._http.get(this.myAppU ...

angular