lodash dynamic filter with multicheck

Question

I have a Multi check. I need a filter show with one option, two options, or three options.

This is the option:

The component has an array. The array is dynamic:

0: "Active"
​
1: "Inactive"
​
2: "Terminated"

Then for the filter, I use lodash inside for

for(var i = 0; i < dataFilter.length; i++) 
          {
              console.log(dataFilter[i]);
              const results = _.filter(res, function(item) {
                 return (item.project === dataFilter[i]);
              });
              this.items = results;
          }

This is the example res

{
    "id": "1",
    "createdOn": "2020-05-01T23:10:13.000Z",
    "createdBy": 'Juan',
    "Title": "testing",
    "project": "Active",
  }

Example the dataFilter

Array [ "Active", "Inactive" ]

But always replace and the filter just filter for one option but sometimes need show filter for 2 o 3 options.

Lodash has another way to the filter in this case or Maybe have another idea?

Answer 1

Iterate through each item in the res array. Get the project name. Then check if that project name exists in the dataFilter. If it doesn't then remove that item - Like this:

this.items = res.filter(({ project }) => dataFilter.includes(project))

ES6 provides an inbuilt .filter function for arrays so there is no need to use lodash.

Basic example

let products = [
  { brand: "Samsung", name: 'Samsung S22 Ultra' },
  { brand: "Apple",  name: 'iPhone 12 Mini' },
  { brand: "Samsung",  name: 'Samsung S21' },
  { brand: "Apple",  name: 'iPhone SE' },
  { brand: "Apple",  name: 'iPhone 13 Pro Max' },
  { brand: "LG",  name: 'LG V60' }
];

let brands_filter = ["Samsung", "LG"];

let filter_list = products.filter(( product ) => {
  return brands_filter.includes(product.brand)
})

console.log(filter_list);

Answer 2

loadsh

One more idea is the to use _filter iterator and custom function with nested loop (For each dataFilter check if the value __includes on "this" item). If "true" return this item under the outer loop.

Example - [Samsung, Apple, LG]:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<script>
var products = [
  { brand: "Samsung", name: 'Samsung S22 Ultra' },
  { brand: "Apple",  name: 'iPhone 12 Mini' },
  { brand: "Samsung",  name: 'Samsung S21' },
  { brand: "Apple",  name: 'iPhone SE' },
  { brand: "Apple",  name: 'iPhone 13 Pro Max' },
  { brand: "LG",  name: 'LG V60' }
];

let brands = [
  { label: 'Samsung', facet: 'brand' },
  { label: 'Apple', facet: 'brand' },
  { label: 'LG', facet: 'brand' }
];

var brand_list = _.map(brands, 'label'); /* [Samsung, Apple, LG] */

var multi_filters = _.filter(products, function(product) { 
  let this_product_status = false;
  /* Nested loop throw list of brands */
  brand_list.forEach((values,keys)=>{
    /* Lodash Checks if value is in collection */
    if(_.includes(product.brand, brand_list[keys])){
      document.write("— " + product.name+"<br>")
      this_product_status = true;
    }
  })
  return this_product_status; /* if truthy return element */
}); 

console.log(multi_filters)

</script>

Same code - Example - [Samsung, LG]:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<script>
var products = [
  { brand: "Samsung", name: 'Samsung S22 Ultra' },
  { brand: "Apple",  name: 'iPhone 12 Mini' },
  { brand: "Samsung",  name: 'Samsung S21' },
  { brand: "Apple",  name: 'iPhone SE' },
  { brand: "Apple",  name: 'iPhone 13 Pro Max' },
  { brand: "LG",  name: 'LG V60' }
];

let brands = [
  { label: 'Samsung', facet: 'brand' },
  //{ label: 'Apple', facet: 'brand' },
  { label: 'LG', facet: 'brand' }
];

var brand_list = _.map(brands, 'label'); /* [Samsung, Apple, LG] */

var multi_filters = _.filter(products, function(product) { 
  let this_product_status = false;
  /* Nested loop throw list of brands */
  brand_list.forEach((values,keys)=>{
    /* Lodash Checks if value is in collection */
    if(_.includes(product.brand, brand_list[keys])){
      document.write("— " + product.name+"<br>")
      this_product_status = true;
    }
  })
  return this_product_status; /* if truthy return element */
}); 

console.log(multi_filters)

</script>