Filtering an array of objects in Angular5

Question

Filtering an array of objects in Angular5

Attempting to refine the display of products, I noticed a problem where the original array is unintentionally altered, leading to incorrect filtering...

categories consists of an array containing objects with categories {title, products[]}

I aim for categoriesView to serve as a filtered array

filterByKeyword(keyword: string) {
    let k = keyword.toLowerCase();

    this.categoriesView = this.categories.filter((c) => {
      for(let q = 0; q < c.products.length; q++) {
        return c.products[q].title.toLowerCase().indexOf(k) >= 0;
      }
    });

    // Filter products within each category:
    for(let q = 0; q < this.categoriesView.length; q++) {
      for(let z = 0; z < this.categories.length; z++) {
        if(this.categoriesView[q].title == this.categories[z].title){
          this.categoriesView[q].products = this.categories[z].products.filter((p) => {
              return p.title.toLowerCase().indexOf(k) >= 0;
          });
        }
      }
    }

    console.log("Categories View: ", this.categoriesView);
    console.log("Categories: ", this.categories);
}

The initial filter operation on categories functions correctly. However, when delving into products, issues arise and changes are made to the original array.

javascript angular typescript filter

Answer 1

Answer №1

Apologies for intervening, but I needed to address your filtering process and code implementation.

Your current approach seems inefficient and messy.

I have taken the liberty to rewrite the code for better clarity, simplicity, and functionality:

filterByKeyword(keyword: string) {

    const searchKeyword = keyword.toLowerCase();

    this.categoriesView = this.categories.filter(category => {
      let isMatched = false;
      for(let product of category.products) {
        if(product.title.toLowerCase().includes(searchKeyword)) { 
          isMatched = true; 
        }
      }
      return isMatched;
    });

    // Alternatively, a more concise version
    // this.categoriesView = this.categories.filter(category => category.products.find(product => product.title.toLowerCase().includes(searchKeyword)));

    for (const viewCategory of this.categoriesView) {
      for (const originalCategory of this.categories) {
        if (viewCategory.title === originalCategory.title) {
          viewCategory.products = originalCategory.products.filter(prdct => prdct.title.toLowerCase().includes(searchKeyword));
        }
      }
    }

    console.log("Categories View: ", this.categoriesView);
    console.log("Categories: ", this.categories);
}

Answer 2

Apologies for intervening, but I needed to address your filtering process and code implementation.

Your current approach seems inefficient and messy.

I have taken the liberty to rewrite the code for better clarity, simplicity, and functionality:

filterByKeyword(keyword: string) {

    const searchKeyword = keyword.toLowerCase();

    this.categoriesView = this.categories.filter(category => {
      let isMatched = false;
      for(let product of category.products) {
        if(product.title.toLowerCase().includes(searchKeyword)) { 
          isMatched = true; 
        }
      }
      return isMatched;
    });

    // Alternatively, a more concise version
    // this.categoriesView = this.categories.filter(category => category.products.find(product => product.title.toLowerCase().includes(searchKeyword)));

    for (const viewCategory of this.categoriesView) {
      for (const originalCategory of this.categories) {
        if (viewCategory.title === originalCategory.title) {
          viewCategory.products = originalCategory.products.filter(prdct => prdct.title.toLowerCase().includes(searchKeyword));
        }
      }
    }

    console.log("Categories View: ", this.categoriesView);
    console.log("Categories: ", this.categories);
}

Answer 3

Answer №2

Here's a way to make it function properly:

filterByKeyword(keyword: string) {
    const k = keyword.toLowerCase();
    this.categoriesView = this.categories.map(x => Object.assign({}, x));
    this.categoriesView = this.categoriesView.filter((category) => {
        category.products = category.products.filter(
          (product)=> product.title.toLowerCase().includes(k));

        return category.products.length>0 }
      );
    if(this.categoriesView.length===0){
      this.categoriesView = this.categories.map(x => Object.assign({}, x));
    }
  }

Answer 4

Here's a way to make it function properly:

filterByKeyword(keyword: string) {
    const k = keyword.toLowerCase();
    this.categoriesView = this.categories.map(x => Object.assign({}, x));
    this.categoriesView = this.categoriesView.filter((category) => {
        category.products = category.products.filter(
          (product)=> product.title.toLowerCase().includes(k));

        return category.products.length>0 }
      );
    if(this.categoriesView.length===0){
      this.categoriesView = this.categories.map(x => Object.assign({}, x));
    }
  }

Answer 5

Answer №3

When working with javascript, it's important to understand that objects are passed by reference. This means that if you have a variable like categoriesView, it is actually a reference to the original categories array. Any changes made to one will affect the other as well.

If you need to create a separate object without affecting the original, you can use the angular.copy() method. This function allows you to make a copy of an object or array so that any modifications made to the copy won't impact the original data.

this.categoriesView = angular.copy(this.categories.filter((c) => {
  for(let q = 0; q < c.products.length; q++) {
    return c.products[q].title.toLowerCase().indexOf(k) >= 0;
  }
});

For more detailed information on how to use angular.copy(), you can visit the official AngularJS documentation here.

Answer 6

When working with javascript, it's important to understand that objects are passed by reference. This means that if you have a variable like categoriesView, it is actually a reference to the original categories array. Any changes made to one will affect the other as well.

If you need to create a separate object without affecting the original, you can use the angular.copy() method. This function allows you to make a copy of an object or array so that any modifications made to the copy won't impact the original data.

this.categoriesView = angular.copy(this.categories.filter((c) => {
  for(let q = 0; q < c.products.length; q++) {
    return c.products[q].title.toLowerCase().indexOf(k) >= 0;
  }
});

For more detailed information on how to use angular.copy(), you can visit the official AngularJS documentation here.

Answer 7

Answer №4

Encountered a problem with:

this.categories.filter( (c) => {...} )

Your array is not being properly iterated as it terminates in the first round. Consider incorporating a temporary boolean as a buffer within your loop, then return it.

Furthermore, contemplate refactoring your code using Array.prototype.map and Array.prototype.reduce, as it will greatly enhance readability.

this.categoriesView = this.categories.filter(c => {
    return c.products.reduce( (acc, product) => {
        return acc || product.title.toLowerCase().includes(k);
    }, false);
});

Answer 8

Encountered a problem with:

this.categories.filter( (c) => {...} )

Your array is not being properly iterated as it terminates in the first round. Consider incorporating a temporary boolean as a buffer within your loop, then return it.

Furthermore, contemplate refactoring your code using Array.prototype.map and Array.prototype.reduce, as it will greatly enhance readability.

this.categoriesView = this.categories.filter(c => {
    return c.products.reduce( (acc, product) => {
        return acc || product.title.toLowerCase().includes(k);
    }, false);
});

Filtering an array of objects in Angular5

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for integrating Contact List information into PhoneGap ListView

How can AngularJS load service data following the addition of a new record?

Using the import keyword is not allowed when Typescript has been incorporated

having difficulties sorting a react table

What is the proper way to implement v-model with Vuex in <select> elements?

Typedoc encountering an issue due to the require syntax

"Creating a dynamic Vue array using computed property from the provided dataset

Attempting to navigate through nested data within existing mapped data

"Seeking guidance on getting my carousel functionality up and running in Angular 8 - any

Issues with dynamically loading content into a drop-down menu using AngularJS

Using an iframe containing a link to trigger the opening of a colorbox in the

Identify when a browser tab is closed and determine which specific tab out of all the open tabs was closed

One simple click to auto-fill the form

Utilizing Axios for sending post requests to Pinterest API

What is the best way to arrange the information in JSON in ascending order and display it in a table format?

Adjustable dimensions and the AngularJS framework

Typescript question: What is the specific error type associated with the 'throw' function in express-validator?

Adding data to a pre-made JavaScript file template to create a fresh document

Updating a Rails partial using JSON response from an AJAX post request

Creating a website that adapts based on the subdomain used