What is the process of extracting an observable from another observable using the pipe method?

Is there a more efficient way to convert an Observable of Observables into an array of Observables in my pipe method? Here is the scenario:

// The type of "observables" is Observable<Observable<MyType>[]>
const observables = this.http.get<MyTypeList>(rootUrl).pipe(
  map(list => list[locale]), 
  map(urlList => urlList.map(url => this.http.get<MyType>(url))),
  // Looking for a way to transform Observable<Observable<MyType>[]> into Observable<MyType>[]
);

forkJoin(observables).subscribe(/* All items are now available*/)

After the second map call, I am seeking an elegant solution to convert

Observable<Observable<MyType>[]>
into Observable<MyType>[]. Any suggestions?

Answer №1

The issue arose when attempting to utilize forkJoin externally, only to realize that it could be effectively used within by implementing the suggested mergeMap.

const data = this.http
  .get<MyTypeList>(apiUrl)
  .pipe(
    map(array => array[lang]), 
    mergeMap(urls =>
      forkJoin(
        urls.items.map(url => this.http.get<MyType>(url))
      )
    )
  );

data.subscribe(/* All desired items are readily available*/);

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

Event emitters from Angular 4 are failing to receive emitted events after the page is refreshed

Hey there, I'm facing an unusual issue with event emitters not functioning correctly during page refreshes. Here's the scenario: First, the user lands on the login page. Upon successful login, they are directed to the home page where I need spec ...

Switching services in test cases with ReflectiveInjector

Can the provider be changed using ReflectiveInjector in the same context? I require B to utilize a different value for the second test. A & B are both services... let injector: ReflectiveInjector; beforeEach(() => { injector = ReflectiveInjec ...

Error: Attempted to call the 'post' method on an undefined object, resulting in an Uncaught TypeError. This occurred within the Ionic 2 framework while executing the Javascript code located

While I attempt to convey my message in English, unfortunately, it is not a language I am fluent in. Currently, I am working on an Ionic 2 project. In this particular scenario, I am trying to make an HTTP request using the POST method while emulating it o ...

Developing a Javascript object using Typescript

Trying my hand at crafting a TypeScript object from JavaScript. The specific JavaScript object I'm attempting to construct can be found here: https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js In the provided JavaScript example, the obj ...

What is the best way to prevent updating the state before the selection of the end date in a date range using react-datepicker?

Managing user input values in my application to render a chart has been a bit tricky. Users select a start date, an end date, and another parameter to generate the chart. The issue arises when users need to edit the dates using react-datepicker. When the s ...

Is there a way to use an Angular interceptor to intercept and modify static files like .html files? I would like to change the lang

While researching Angular intercepting, I stumbled upon this helpful documentation: here. My goal is to intercept HTML using an Angular interceptor in order to modify the HTML file before it's displayed in the browser. Trying to accomplish this on the ...

TypeScript 1.6 warning: Component XXX cannot be instantiated or called as a JSX element

var CommentList = React.createClass({ render: function () { return ( <div className="commentList"> Hello there! I am the CommentList component. </div> ); } }); var ...

Managing properties of classes within callbacks using TypeScript

I am currently working on the following task: class User { name: string; userService: UserService; //service responsible for fetching data from server successCallback(response: any) { this.name = string; } setUser() { ...

Tips for preloading a TypeScript class using the -r option of ts-node

Imagine you have a file called lib.ts that contains the following code: export class A {} console.log('script loaded'); Now, if you launch the ts-node REPL using the command: npx ts-node -r ./lib.ts, you will see that it outputs "script loaded," ...

Using parameters in data binding with Angular 5

I have a scenario where I need to categorize and display data fetched from my database in JSON format. The data consists of various columns such as id, name, message, and type. My goal is to organize this data into different div elements based on the conte ...

Implementing a unique sorting algorithm for an array of numbers in Angular

I need to organize an array of numbers in descending order with a custom sorting method based on a specified number, all without splitting or filtering the array. I am currently working with Angular 17 and Rxjs 7.8. For instance, if I have this array of n ...

Tips for defining the types of nested arrays in useState

Looking for guidance on how to define types for nested arrays in a useState array This is my defined interface: interface ToyProps { car: string | null; doll: number | null; } interface SettingsProps { [key: string]: ToyProps[]; } Here is the stat ...

Angular 2: A helpful guide on how to duplicate an object within another object

I'm seeking assistance on how to duplicate an object into another object using Angular 2. Previously in Angular, I utilized angular.copy() to duplicate objects to the vague reference of the original ones. However, when attempting the same in Angular ...

What should be the proper service parameter type in the constructor and where should it be sourced from?

Currently, I am faced with a situation where I have two Angular 1 services in separate files and need to use the first service within the second one. How can I properly type the first service in the constructor to satisfy TypeScript requirements and ensure ...

Update the image source dynamically upon the opening of an accordion in Angular

I have the following HTML code snippet in my file: <div class="col-md-3 col-sm-2 col-2 collapsedData" > <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-con ...

Unable to load class; unsure of origin for class labeled as 'cached'

Working on an Angular 10 project in visual studio code, I've encountered a strange issue. In the /app/_model/ folder, I have classes 'a', 'b', and 'c'. When running the application in MS Edge, I noticed that only classes ...

Can anyone suggest a simpler method for creating function signatures with multiple conditions?

In my function, the first argument now determines if the function should receive an array or not. This function is similar to Foo type stringF = (arr: false, type: 'str', value: string) => void type numberF = (arr, false, type: 'num&apo ...

A Typescript type that verifies whether a provided key, when used in an object, resolves to an array

I have a theoretical question regarding creating an input type that checks if a specific enum key, when passed as a key to an object, resolves to an array. Allow me to illustrate this with an example: enum FormKeys { x = "x", y = "y&q ...

Tips for stopping TypeScript code blocks from being compiled by the Angular AOT Webpack plugin

Is there a way to exclude specific code from Angular's AOT compiler? For instance, the webpack-strip-block loader can be utilized to eliminate code between comments during production. export class SomeComponent implements OnInit { ngOnInit() { ...