The Angular filter fails to remove elements from the list

Question

The Angular filter fails to remove elements from the list

I have implemented a filter function to remove objects from an array, but I am facing an issue. Challenge: Despite using the filter function, the elements are not being removed from the array as expected. Why are these objects still present in the array after filtering them out?

async filterPspDeliveries(pspDeliveryList: PspDelivery[]){
    try {
        return pspDeliveryList.filter(pspDelivery => pspDelivery.packageList.length > 0);
    } catch(e) {
      console.log(e);
    }
}

The filter function is called within the same class here:

for (let psp of pspList){
    let tmpDeliveryList = await this.filterPspDeliveries(psp.deliveryList);
    psp.deliveryList = tmpDeliveryList;
}

Note: My intention is to eliminate deliveries that do not have a package list associated with them.

Your assistance on this matter would be greatly appreciated.

angular typescript filter ecmascript-6

Answer 1

Answer №1

There is no need for a try-catch block in this scenario since the .filter function will always succeed. Consider using the following code instead:

function filterPspDeliveries(pspDeliveryList: PspDelivery[]) {
    return pspDeliveryList.filter(pspDelivery => pspDelivery.packageList && pspDelivery.packageList.length > 0);
}

Answer 2

There is no need for a try-catch block in this scenario since the .filter function will always succeed. Consider using the following code instead:

function filterPspDeliveries(pspDeliveryList: PspDelivery[]) {
    return pspDeliveryList.filter(pspDelivery => pspDelivery.packageList && pspDelivery.packageList.length > 0);
}

Answer 3

Answer №2

Referencing information from this source:

The await operator serves to pause execution until a Promise is settled. It is restricted to use within an async function.

An issue arises when you await a function that does not yield a Promise. Rather, the function async filterPspDeliveries is producing an array of PspDelivery.

Furthermore, there is no necessity for the async identifier in the filterPspDeliveries method since no awaiting occurs.

To resolve this matter, two solutions are proposed:

Solution 1

Omit the await keyword:

 for(let psp of pspList){
      let tmpDeliveryList =  this.filterPspDeliveries(psp.deliveryList);
      psp.deliveryList = tmpDeliveryList;
    }

Solution 2

Retain the await keyword by returning a promise within filterPspDeliveries:

  filterPspDeliveries(pspDeliveryList: PspDelivery[]): Promise<PspDelivery[]> {
    try {
      return new Promise(resolve => {
        let result = pspDeliveryList.filter((pspDelivery) => {
          return (pspDelivery.packageList.length > 0);
        })
        resolve(result);
        return;
      });
    } catch (e) {
      console.log(e);
    }
  }


for(let psp of pspList){
      let tmpDeliveryList = await this.filterPspDeliveries(psp.deliveryList);
      psp.deliveryList = tmpDeliveryList;
    }

You can observe the functionality of both solutions here.

Answer 4

Referencing information from this source:

The await operator serves to pause execution until a Promise is settled. It is restricted to use within an async function.

An issue arises when you await a function that does not yield a Promise. Rather, the function async filterPspDeliveries is producing an array of PspDelivery.

Furthermore, there is no necessity for the async identifier in the filterPspDeliveries method since no awaiting occurs.

To resolve this matter, two solutions are proposed:

Solution 1

Omit the await keyword:

 for(let psp of pspList){
      let tmpDeliveryList =  this.filterPspDeliveries(psp.deliveryList);
      psp.deliveryList = tmpDeliveryList;
    }

Solution 2

Retain the await keyword by returning a promise within filterPspDeliveries:

  filterPspDeliveries(pspDeliveryList: PspDelivery[]): Promise<PspDelivery[]> {
    try {
      return new Promise(resolve => {
        let result = pspDeliveryList.filter((pspDelivery) => {
          return (pspDelivery.packageList.length > 0);
        })
        resolve(result);
        return;
      });
    } catch (e) {
      console.log(e);
    }
  }


for(let psp of pspList){
      let tmpDeliveryList = await this.filterPspDeliveries(psp.deliveryList);
      psp.deliveryList = tmpDeliveryList;
    }

You can observe the functionality of both solutions here.

Answer 5

Answer №3

What are your thoughts on implementing the following change:

async filterPspDeliveries(pspDeliveryList: PspDelivery[]){
    try{
      return pspDeliveryList.filter((pspDelivery) => pspDelivery.packageList && pspDelivery.packageList.length > 0);
    } catch(e) {
      console.log(e);
    }
  }

Answer 6

What are your thoughts on implementing the following change:

async filterPspDeliveries(pspDeliveryList: PspDelivery[]){
    try{
      return pspDeliveryList.filter((pspDelivery) => pspDelivery.packageList && pspDelivery.packageList.length > 0);
    } catch(e) {
      console.log(e);
    }
  }

The Angular filter fails to remove elements from the list

Answer №1

Answer №2

Solution 1

Solution 2

Answer №3

Similar questions

What sets apart the ? operator from incorporating undefined in the type declaration?

Specify that a function is adhering to an interface

What is the best way to incorporate an image into the canvas element and then use it as a drawing surface?

Issue with missing support-v4.jar in Nativescript Angular

How to retrieve data from a nested object in Angular templates

Angular 4: Modifying the URL without the Component being Displayed

Is it possible to dynamically change an ngModel value directly from the component?

Looking to effortlessly move and arrange items with ng2-drag-drop in Angular 2?

What is the best way to retrieve information from a json file using axios in a React project?

Display loader during data retrieval in Angular 2

I am encountering a strange error in the console when trying to implement a custom navigation system tailored to each user using the core UI Angular

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

Unable to access res.name due to subscription in Angular

Angular 13: Opt for Just-in-Time compilation instead of Ahead-of-Time when using ng-

While the Angular application in VS Code may be successfully compiled, the most recent changes may not appear in the browser

Retrieve items from the <ng-content></ng-content> within the corresponding component in the TypeScript file

Is it possible to utilize Webpack 5's ChunkGroup API with several entries?

Experiencing a RepositoryNotFoundError in TypeORM, although I am confident that the repositories are properly registered

Leveraging the Typescript Compiler API for transforming a typescript document

Error building Angular module occurred while executing the project