Sort the observable data by a value returned from an API request

Question

Sort the observable data by a value returned from an API request

I am completely new to using RxJS and any assistance offered would be greatly appreciated!

Within my component's HTML template, I am looking to create a radio button list.

The values for this list are fetched from an observable using the async pipe.

This snippet shows the template section for the radio button list:

<div *ngIf="entities$ | async as entities">
    <mat-radio-group
        aria-labelledby="entities-radio-group-label"
        class="entities-radio-group"
        <mat-radio-button *ngFor="let entity of entities" [value]="entity">
          {{entity.description}}          
        </mat-radio-button>
      </mat-radio-group>
</div>

In the component class, I have an observable that retrieves the entities' data via a service. I also apply a filter based on the entity type.

  entities$: Observable<Entity[]> = this.eventsService.entities$
  .pipe(
    map(items => items.filter(item => item.type.toLowerCase().indexOf("set") > -1)),
    )

The structure of a retrieved entities object is as follows:

[
{"id":"34534534643364",
 "type":"SET",
 "description":"some description",
 "link":"/conf/sets/34534534643364"},
{"id":"5474745744457547",
 "type":"SET",
 "description":"other description",
 "link":"/conf/sets/5474745744457547"}
 ]

While the current setup successfully filters and displays "SET" type entities, I need to implement additional filtering based on information obtained from an API call using the entity link.

A sample request to the API initiated by the service looks like this:

 restService.call<any>(entityUrl)
 .pipe(finalize(()=>this.loading=false))
 .subscribe(
    apidata => console.log(`data: ${JSON.stringify(apidata)}`),
    error => this.alert.error('Failed to retrieve entity: ' + error.message)
    );

The response received is an object structured as shown below:

{
    "id": "34534534643364",
    "name": "some name",
    "description": null,
    "type": {
        "value": "LOGICAL",
        "desc": "Logical"
    },
    "content": {
        "value": "IEP",
        "desc": "This it the value I need"
    },
    "status": {
        "value": "ACTIVE",
        "desc": "Active"
    }
}

To conduct additional filtering, specifically utilizing the value under "desc", I attempted adding a function to the source observable but encountered issues due to the asynchronous nature of the API request processing.

An alternative approach I considered was working only with the results from the API for populating the template's radio button group. I managed to create an array of observables representing each API result but am uncertain about incorporating this array into the template.

Any guidance or suggestions provided will be highly valued!

javascript angular typescript asynchronous observable

Answer 1

Answer №1

It seems that the initial scenario is as described below:

You are retrieving multiple items from your API
For each item, you need to fetch a filter object from the API to determine if the item should be filtered out

The primary issue with your code is: You cannot use the map operator to chain observables. Instead, I recommend using switchMap along with forkJoin.

I propose making the following modifications to your async pipe (refer to my comments in the code for better understanding):

entities$: Observable<Entity[]> = this.eventsService.entities$
    .pipe(
        tap((items) => console.log("started pipe", items)),
        map(items => items.filter(item => item.type.toLowerCase().indexOf("set") > -1)),
        tap((items) => console.log("after set filtered pipe", items)),
        switchMap(items => {

            // Create an array of filter observables that include an api-call
            // and return the item itself if the condition is met, or NULL otherwise
            const filterObs = items.map(item => this.descFilter(item));
            
            // Utilize forkJoin to execute the array with the http-requests
            return filterObs.length ? forkJoin(filterObs) : of([]);
        }),
        // Exclude the NULL values:
        map(items => items.filter(i => i !== null)),
        tap((items) => console.log("after descFilter: ", items)),
        tap(() => this.clear())
    );

You will also need to modify the descFilter() method to make it compatible with the async pipe:

/* Depending on whether the condition is satisfied, either the item itself or NULL will be returned */
descFilter(item: Entity): Observable<Entity | null> {
    return this.restService.call<any>(item.link).pipe(
        map(res => res.content.desc === "some string" ? item : null)
    );
}

Note: At some point, you may need to subscribe to entities$ to execute the code.

Answer 2

It seems that the initial scenario is as described below:

You are retrieving multiple items from your API
For each item, you need to fetch a filter object from the API to determine if the item should be filtered out

The primary issue with your code is: You cannot use the map operator to chain observables. Instead, I recommend using switchMap along with forkJoin.

I propose making the following modifications to your async pipe (refer to my comments in the code for better understanding):

entities$: Observable<Entity[]> = this.eventsService.entities$
    .pipe(
        tap((items) => console.log("started pipe", items)),
        map(items => items.filter(item => item.type.toLowerCase().indexOf("set") > -1)),
        tap((items) => console.log("after set filtered pipe", items)),
        switchMap(items => {

            // Create an array of filter observables that include an api-call
            // and return the item itself if the condition is met, or NULL otherwise
            const filterObs = items.map(item => this.descFilter(item));
            
            // Utilize forkJoin to execute the array with the http-requests
            return filterObs.length ? forkJoin(filterObs) : of([]);
        }),
        // Exclude the NULL values:
        map(items => items.filter(i => i !== null)),
        tap((items) => console.log("after descFilter: ", items)),
        tap(() => this.clear())
    );

You will also need to modify the descFilter() method to make it compatible with the async pipe:

/* Depending on whether the condition is satisfied, either the item itself or NULL will be returned */
descFilter(item: Entity): Observable<Entity | null> {
    return this.restService.call<any>(item.link).pipe(
        map(res => res.content.desc === "some string" ? item : null)
    );
}

Note: At some point, you may need to subscribe to entities$ to execute the code.

Sort the observable data by a value returned from an API request

Answer №1

Similar questions

What's the issue with my ExpressJS req.query not functioning as expected?

What is the best way to dynamically link an Angular Material table with information pulled from the backend server

Error encountered when attempting to close a MatDiaLog in Angular as the close button is unable to read the property 'close' of null

Configuring a custom domain for a Rust service on Clever Cloud: A step-by-step guide

Error message: NextJs throws aReferenceError when trying to access the document object on page refresh

How to compare and filter items from two arrays using TypeScript

"Customizing the template of the Angular Material 2 datepicker: A step-by-step

Enhance the functionality of the custom transaction form in NetSuite by incorporating new actions

Exploring VueJS: Sorting objects within an array

Hiding a div with Javascript when the Excel dialog box is loaded

Utilize Angular to simultaneously filter search results by URL and make selections in a dropdown menu

What are the consequences of relying too heavily on deep type inference in React and Typescript?

Using parameters and data type in Typescript

Discover an alternative to Events by harnessing the power of Observables to effectively listen for dismiss events in Angular Ionic

Load Angular modules dynamically

Having issues sorting the ranking table numerically in a Javascript/jQuery/JSON/localStorage game

Displaying and Concealing Messages with VueJS

The parameter type '==="' cannot be assigned to the 'WhereFilterOp' type in this argument

Design an interactive listbox with both HTML and Angular that allows for multiple selections

Tips for maintaining JSON data in CK Editor