Ensure that data is properly filtered before being presented in the Angular 5 component

Question

Ensure that data is properly filtered before being presented in the Angular 5 component

Currently, I am dealing with football data retrieved from an API.

https://i.sstatic.net/MRSsH.jpg

When I make a request to this API endpoint, all the available lists are displayed. My goal is to organize the list based on the game status, such as Finished, Postponed, and Timed.

I attempted to achieve this using the following code:

<div *ngFor="let fixture of fixtures">
    <div *ngIf="fixture.status !== 'FINISHED'">
        <p>{{fixture.date}}</p>
    </div>
</div>

Although it successfully filters out the items from view, the complete filtration isn't achieved. Due to the extensive nature of the list, I only want to display the initial 20 items. Here's what I tried:

<div *ngFor="let fixture of fixtures | slice:0:20">
    <div *ngIf="fixture.status !== 'FINISHED'">
        <p>{{fixture.date}}</p>
    </div>
</div>

The intention was to only show the first 20 filtered items from the list, but unfortunately, it did not work as expected. This is because the original unfiltered list is still present.

It seems my current method of filtering is inefficient. The filtering only applies to the presentation in the view, not to the actual list sourced from the API. Therefore, attempts to slice the list do not yield the desired outcome.

If anyone has suggestions on how I can overcome this issue, your assistance would be greatly appreciated. Thank you in advance.

angular typescript angular-ng-if

Answer 1

Answer №1

Avoid using the slice pipe in that way as it may not work well with your *ngIf. The pipe operates on the original list, not the filtered result set.

Before proceeding to a solution, examine the source code of the slice pipe to understand its internal workings:

@Pipe({name: 'slice', pure: false})
export class SlicePipe implements PipeTransform {
  transform(value: any, start: number, end?: number): any {
    if (value == null) return value;

    if (!this.supports(value)) {
      throw invalidPipeArgumentError(SlicePipe, value);
    }

    return value.slice(start, end);
  }

  private supports(obj: any): boolean { return typeof obj === 'string' || Array.isArray(obj); }
}

As evident from the source code, the pipe slices the original list instead of the filtered result set.

Source: Angular.io

To resolve your issue, perform filtering in your component and iterate through the filtered results in your template. Apply the slice pipe only after this step.

This approach is more efficient as it avoids unnecessary loops in the component and allows for additional operations on the filtered lists.

Component:

@Component({...})
export class MyComponent {
    list: any[] = [...];
    fixtures: any[] = this.list.filter(item => item.status !== 'FINISHED');
}

Template:

<div *ngFor="let fixture of fixtures | slice:0:20">
    <p>{{fixture.date}}</p>
</div>

Update:

To address searching issues, search within the original list rather than the filtered list.

Answer 2

Avoid using the slice pipe in that way as it may not work well with your *ngIf. The pipe operates on the original list, not the filtered result set.

Before proceeding to a solution, examine the source code of the slice pipe to understand its internal workings:

@Pipe({name: 'slice', pure: false})
export class SlicePipe implements PipeTransform {
  transform(value: any, start: number, end?: number): any {
    if (value == null) return value;

    if (!this.supports(value)) {
      throw invalidPipeArgumentError(SlicePipe, value);
    }

    return value.slice(start, end);
  }

  private supports(obj: any): boolean { return typeof obj === 'string' || Array.isArray(obj); }
}

As evident from the source code, the pipe slices the original list instead of the filtered result set.

Source: Angular.io

To resolve your issue, perform filtering in your component and iterate through the filtered results in your template. Apply the slice pipe only after this step.

This approach is more efficient as it avoids unnecessary loops in the component and allows for additional operations on the filtered lists.

Component:

@Component({...})
export class MyComponent {
    list: any[] = [...];
    fixtures: any[] = this.list.filter(item => item.status !== 'FINISHED');
}

Template:

<div *ngFor="let fixture of fixtures | slice:0:20">
    <p>{{fixture.date}}</p>
</div>

Update:

To address searching issues, search within the original list rather than the filtered list.

Ensure that data is properly filtered before being presented in the Angular 5 component

Answer №1

Similar questions

Error occurred: Unable to locate module: Error: Unable to resolve './templates'

Angular 13: Masking User Input with Reactive Form Controls

Creating visual content using Webpack and Angular2

Issue with TypeORM @BeforeInsert causing a field in Entity not to be populated with value

How can I effectively build an Angular Library containing various components?

Is pagination available in Material Angular or an alternative solution present?

What is the best way to alter the Date format in Typescript?

Exploring the async/await functionality in TypeScript

`End Angular2 session and close browser tab`

Obtain Value from Function Parameter

Adjusting the timeout for a particular operation according to its unique identifier

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

Utilizing async await allows for the sequential processing of one item at a time within a For loop

Ionic datetime returns default values upon initialization

What is the best way to showcase a half star rating in my custom angular star rating example?

What is the best way to iterate over JSON data from an endpoint that contains multiple nested arrays using the .map() method?

Angular Service Singleton Utilized in Components

Executing a function in Angular 2 depending on the class assigned to a <div>

Best practice for encapsulating property expressions in Angular templates

Creating a new list by grouping elements from an existing list