How to effectively utilize higher order map in RxJS?

const observable$ = combineLatest([searchAPI$, searchByID$]) // Line 1
        .pipe(
            map(data => {
                let APISearchResult = data[0]; // This is an array of SearchResult type
                const searchByIDRawData = data[1]; // This is an array of Opportunity type

            // Create an array of Observable of Search Result for each of the Opportunity type
            const searchByIDSearchResults$ = searchByIDRawData.map(s => this.CreateSearchResultItemFromOpportunity(s, keywordSearch)); // Line 7
            
            return combineLatest(searchByIDSearchResults$)
            .pipe(
                map(searchResults => {
                    return APISearchResult.concat(searchResults); // Combine the output from APISearchResult with searchByIDSearchResults$
                })
            )
        }))
    
    return observable$;

I have a situation where two Observables are combined in Line 1 to produce the final output.

Line 7 involves emitting an array of Observables that convert the output from Opportunity type to SearchResult type when subscribed.

The intended final result should be an array of SearchResult[].

Unfortunately, the current type of observable$ is

Observable<Observable<SearchResult[]>>
, which is not what was expected.

Can someone point out where there might be an issue in the mapping process?

Thank you.

Answer №1

Consider replacing the Map with a SwitchMap on line 3. It is recommended to avoid returning an Observable in a Map, as it may pass it along the chain without treating it properly as an Observable. Maps are typically used for transforming Non-Observable values, while SwitchMap (and other similar operators) are designed for chaining Observables.

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

Broadcast the latest N occurrences

I am working on an Angular 6 application where I want to display the most recent N events from a continuous stream of events coming from a web-socket. Currently, the data is shown using RxJS Observable<Event[]>: <div *ngFor="let event of (wsEven ...

``Error Message: TypeORM - could not establish database connection

I encountered an issue while running my project built with Typescript, Typeorm, and Express. The error message received when running the dev script was: connectionNotFoundError: Connection "default" was not found The content of my ormconfig.json ...

Tips for reducing a discriminated union by using the key value of a Record

I am working with a union type that has a discriminator property called "type". I then define a Record<> where the keys are the "type" property values. How can I specify the second generic parameter of the Record (Record< , this param>) so tha ...

Customizing the Material UI v5 theme with Typescript is impossible

I'm attempting to customize the color scheme of my theme, but I am encountering issues with accessing the colors from the palette using theme.palette. Here is a snippet of my theme section: import { createTheme } from "@mui/material/styles&qu ...

Encountering issues in transmitting form data to a Node server from Angular

In my Angular application, I am working on creating a registration page with validation. Once the user fills out the form and submits it, the data is sent to the server and saved in MongoDB. This is the approach I have taken: register_user() { const ...

Using TypeScript's Discriminated Union with an Optional Discriminant

After creating a discriminated union to type props in a React component, things got a bit interesting. Here's a simplified version of what was done: type Client = { kind?: 'client', fn: (updatedIds: string[]) => void }; type Serv ...

Having trouble displaying resources when implementing FullCalendar-Scheduler along with PrimeNG-Scheduler

Are you familiar with FullCalendar's add-on called Scheduler? I'm attempting to integrate it with the PrimeNG-Schedule component but running into issues. According to the PrimeNG documentation, there is an 'options' property that allows ...

Tips for overlaying a webpage with several Angular components using an element for disabling user interactions

I currently have an asp.net core Angular SPA that is structured with a header menu and footer components always visible while the middle section serves as the main "page" - comprised of another angular component. What I am looking to achieve is ...

What could be causing this discriminated union to act differently than anticipated?

Desired Outcome When the href prop is present, TypeScript should recognize that the remaining props are suitable for either a Link or Button element. However, I am encountering an error indicating type conflicts with the button element. Type '{ chil ...

Issue with for loop execution within subscribe event

In my chat design, there is a list of people on the left side. When a user clicks on any person, I display their chat history on the right side. To achieve this, I need to transfer user details from one component to another using an RXJS subscribe call. Da ...

What is the best way to eliminate automatically generated code by the Inferencer tool in a refined project?

I'm new to refine.dev and I need help removing a section. Could you please highlight the code snippet that needs to be removed? Additionally, can you show me the file structure and where this section is located? I also can't seem to find the layo ...

Can you explain the meaning of <T, U = T> in typescript terms?

While I'm comfortable with the syntax <T, U> and its use, I find myself puzzled by the syntax <T, U = T>. I've combed through the TypeScript documentation without success in locating any information on this. Any recommendations for fu ...

Exploring the Behavior of Typescript Modules

When working with the module foo, calling bar.factoryMethod('Blue') will result in an instance of WidgetBlue. module foo { export class bar { factoryMethod(classname: string): WidgetBase { return new foo["Widget" + classname](); ...

Angular 10 introduces a new approach to handling concurrency called "forkJoin"

Here is the code I have: async getBranchDetails() ----component method { let banks = this.bankDataService.getBanks(); let branchTypes = this.branchDataService.getBranchTypes(); forkJoin([banks,branchTypes]).subscribe(results => { ...

Grouping Columns in an HTML Table using Angular 4

I'm currently faced with the task of retrieving flat data from an API and presenting it in an HTML table using Angular 4. I'm a bit unsure about how to iterate over the data, possibly using a for-each loop. I have attempted to utilize ngFor but I ...

What steps should I take to turn off ES Module Error notifications in VSCode?

After switching to the Bun JS Runtime, the distinction between ES Modules and CommonJS became irrelevant as Bun seamlessly handles both. However, VSCode seems to not be on the same page, throwing errors whenever actions that would work in Bun but not in No ...

Encountering a module not found error when attempting to mock components in Jest unit tests using TypeScript within a Node.js

I'm currently in the process of incorporating Jest unit testing into my TypeScript-written Node.js application. However, I've hit a snag when it comes to mocking certain elements. The specific error I'm encountering can be seen below: https ...

Is it possible to adjust the height of the dropdown menu in a mat-select component in Angular 7?

How can I adjust the height of a mat-select in Angular7 to display all items properly? Here is my component file: import { Component, ViewEncapsulation } from "@angular/core"; import { FormControl } from "@angular/forms"; /** @title Select with multiple ...

Error message 2339 - The property 'toggleExpand' is not recognized on the specified type 'AccHeaderContextProps | undefined'

When utilizing the context to share data, I am encountering a type error in TypeScript stating Property 'toggleExpand' does not exist on type 'AccHeaderContextProps | undefined'.ts(2339). However, all the props have been declared. inter ...

Changing a d3 event from JavaScript to Typescript in an Angular2 environment

I am a beginner in Typescript and Angular 2. My goal is to create an Angular2 component that incorporates a d3js tool click here. However, I am facing challenges when it comes to converting it to Typescript. For instance, I am unsure if this code rewrite ...