Combine two observables that contain different data types

Question

Combine two observables that contain different data types

Here are the functions I am working with:

  getNetworkByName(prefix: string): Observable<Network[]> {
return this.http.get<Network[]>(this.Url + '/networks/search?name-prefix=' + prefix)
  .catch(handleError); }

and

getNetwork(id: number): Observable<Network> {
return this.http.get<Network>(this.Url + '/networks/' + id)
  .catch(handleError); }

I am trying to create a new function called

getNetworkByNameAndId(prefix: string | number): observable<network[]>

that combines the results from the previous two functions. I attempted to use the merge operator but encountered issues due to different types.

Is there an efficient way to solve this without directly subscribing to the functions? This needs to be resolved on the frontend. Sometimes my network name can include special characters like "&" and also, internally, a network Id might be represented as just "1". I want the search to be based on both the name and the id. My attempt looked like this:

return this.getNetworkByName(prefix.toString()).pipe(merge(this.getNetwork(parseInt(prefix,10)));

This resulted in an error stating:

Type 'Observable<Network | Network[]>' is not assignable to type 'Observable<Network[]>'.

Thank you for your help!

angular typescript rxjs

Answer 1

Answer №1

Here's a possible solution:

retrieveNetworkByTitleAndIdentifier(title: string, identifier: number): Observable<Network[]> {
    return Observable.forkJoin(
        retrieveNetworkByTitle(title),
        retrieveNetworkByIdentifier(identifier)
    ).map(([resultA, resultB]) => [...resultA, resultB]);
}

Answer 2

Here's a possible solution:

retrieveNetworkByTitleAndIdentifier(title: string, identifier: number): Observable<Network[]> {
    return Observable.forkJoin(
        retrieveNetworkByTitle(title),
        retrieveNetworkByIdentifier(identifier)
    ).map(([resultA, resultB]) => [...resultA, resultB]);
}

Combine two observables that contain different data types

Answer №1

Similar questions

Encountering a Lint No Nested Ternary Error while utilizing the ternary operator

Can an Angular library be imported without utilizing npm?

In Angular Mat Stepper, only allow navigation to active and completed steps

Converting typescript path aliases into local file paths

The Formik and React error is indicating that the '{ refetch: any; }' type is absent

The Angular array stays undefined when JSON data is being passed

Incorporating a new function into a TypeScript (JavaScript) class method

Issue with rendering HTML tags when replacing strings within Ionic 2 and Angular 2

Offer Angular module functionality

Is it possible to verify if the @Output is correctly wired up within an Angular component?

How can I display options in a react autocomplete feature?

Encountering an issue while trying to upgrade angular from version 8 to version 16. The error message states: "Unable to bind to 'something' as it is not recognized as a property of 'something'."

Potential absence of object.ts(2531)

Encountering compilation issues when transitioning from Angular 7 to Angular 8

Binding an event to an Angular 2 component directly within its selector code

The div with an ngIf directive in Angular 2+ only shows up on the page after it has

The Karma testing feature in Angular Quickstart encounters issues right from the start

Using Angular: Binding Angular variables to HTML for display

Instead of displaying the downloadurl, the `[object Object]` is shown

Setting multiple route parameters for a single segment