javascript - Filter array and compare but skip null values - Stack Overflow

admin管理员组

文章数量:1386656

I am currently trying to filter available products based on their selected options.

const products = [{
        id: 1,
        name: 'Safari',
        horsepowers: 30,
        doors: 4,
        gear_type: 'automatic',
        wheels: 6
    },
    {
        id: 2,
        name: 'Jungle',
        horsepowers: 50,
        doors: 3,
        gear_type: 'automatic',
        wheels: 5
    },
    {
        id: 3,
        name: 'Moon',
        horsepowers: 30,
        doors: 4,
        gear_type: 'manual',
        wheels: 4
    }
]

const selectedOptions = 
{
   horsepowers: 50,
   doors: 3,
   gear_type: null,
   wheels: null
}

Typically I would do something like

const availableProducts = products.filter((product) => 
  product.horsepowers === selectedOptions.horsepowers &&
  product.doors === selectedOptions.doors .... etc

however, how do I skip null values, empty arrays, and undefined values if the user has not yet selected all possible options yet?

I am currently trying to filter available products based on their selected options.

const products = [{
        id: 1,
        name: 'Safari',
        horsepowers: 30,
        doors: 4,
        gear_type: 'automatic',
        wheels: 6
    },
    {
        id: 2,
        name: 'Jungle',
        horsepowers: 50,
        doors: 3,
        gear_type: 'automatic',
        wheels: 5
    },
    {
        id: 3,
        name: 'Moon',
        horsepowers: 30,
        doors: 4,
        gear_type: 'manual',
        wheels: 4
    }
]

const selectedOptions = 
{
   horsepowers: 50,
   doors: 3,
   gear_type: null,
   wheels: null
}

Typically I would do something like

const availableProducts = products.filter((product) => 
  product.horsepowers === selectedOptions.horsepowers &&
  product.doors === selectedOptions.doors .... etc

however, how do I skip null values, empty arrays, and undefined values if the user has not yet selected all possible options yet?

• javascript
• arrays
• filter
• conditional-statements

Share Improve this question Follow edited Dec 1, 2021 at 12:39 Peter Seliger 13.5k33 gold badges3030 silver badges4444 bronze badges asked Nov 15, 2021 at 21:07 Mads HjorthMads Hjorth 44711 gold badge1010 silver badges2424 bronze badges 3

• why not filter selectedOptions to remove the pairs with null values? Then get and iterate over the keys for your other filter test. – Randy Casburn Commented Nov 15, 2021 at 21:10
• please add some examples of unwanted values. – Nina Scholz Commented Nov 15, 2021 at 21:35
• Thanks for the many answers. Very helpful all of you. – Mads Hjorth Commented Nov 15, 2021 at 21:46

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 1

The next provided approach takes advantage of the 2nd thisArg argument of almost every available prototypal array method.

Thus one can write a generic filter function which pares any item's property values to the related ones configured by the selectedOptions object which will be passed alongside the filter function as filter's 2nd argument and as the filter function's this context ...

const selectedOptions = {
  horsepowers: 50,
  doors: 3,
  gear_type: null,
  wheels: null,
};
const products = [{
  id: 1,
  name: 'Safari',
  horsepowers: 30,
  doors: 4,
  gear_type: 'automatic',
  wheels: 6,
}, {
  id: 2,
  name: 'Jungle',
  horsepowers: 50,
  doors: 3,
  gear_type: 'automatic',
  wheels: 5,
}, {
  id: 3,
  name: 'Moon',
  horsepowers: 30,
  doors: 4,
  gear_type: 'manual',
  wheels: 4,
}];

function doItemPropertiesEqualEveryBoundSelectedOption(item) {
  return Object
    // create key value pairs from the `this` bound selected options.
    .entries(this)
    // skip/ignore selected option entries where `value` equals `null`.
    .filter(([key, value]) => value !== null)
    // execute item specific selected option validation via `every`.
    .every(([key, value]) => item[key] === value);    
}
console.log(
  products
    .filter(
      doItemPropertiesEqualEveryBoundSelectedOption,
      selectedOptions,
    )
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

In order to answer another of the OP's questions ...

"however, how do I skip null values, empty arrays, and undefined values if the user has not yet selected all possible options yet?"

... and also provide a generic solution to it, the above approach can be changed to a thisArg object which not only features the selected options but also the condition of not to be validated (invalid) selectedOption properties ...

const products = [{
  id: 1,
  name: 'Safari',
  horsepowers: 30,
  doors: 4,
  gear_type: 'automatic',
  wheels: 6,
}, {
  id: 2,
  name: 'Jungle',
  horsepowers: 50,
  doors: 3,
  gear_type: 'automatic',
  wheels: 5,
}, {
  id: 3,
  name: 'Moon',
  horsepowers: 30,
  doors: 4,
  gear_type: 'manual',
  wheels: 4,
}];

const selectedOptions = {
  horsepowers: 50,
  doors: 3,
  gear_type: null,
  wheels: null,
};
const isInvalidValue = (value) => {
  return Array.isArray(value)
    // empty array validation.
    ? (value.length === 0)
    // undefined and null value validation.
    : (value == null)
}

function doItemPropertiesEqualEveryBoundValidOption(item) {
  const { options, isInvalidValue } = this;
  return Object
    .entries(options)
    .filter(([key, value]) => !isInvalidValue(value))
    .every(([key, value]) => item[key] === value);    
}
console.log(
  products
    .filter(
      doItemPropertiesEqualEveryBoundValidOption,
      { options: selectedOptions, isInvalidValue },
    )
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

selectedOptions.horsepowers == null ? true : product.horsepowers === selectedOptions.horsepowers &&
product.doors == null ? true : product.doors === selectedOptions.doors

If you want to keep it in line, you can use a ternary operator to check if it's null before paring.

You could preprocess selectedOptions first and then paring:

const applicableOptions = Object.entries(selectedOptions).filter(
  ([_, value]) => value !== null && value !== undefined
);

const availableProducts = products.filter((product) =>
  applicableOptions.every(([optKey, optValue]) => product[optKey] === optValue)
);

to pare using array, you would need to update your example as there's no array property

Rather than typing in each option by hand, you could just iterate over selectedOptions. Then it's as simple as checking if the value of each option is null before paring.

let filtered = products.filter(e => {
  for(let [key, value] of Object.entries(selectedOptions))
  {
    if(value != null && e[key] != value)
      return false;
  }
  return true;
});

const products = [{
        id: 1,
        name: 'Safari',
        horsepowers: 30,
        doors: 4,
        gear_type: 'automatic',
        wheels: 6
    },
    {
        id: 2,
        name: 'Jungle',
        horsepowers: 50,
        doors: 3,
        gear_type: 'automatic',
        wheels: 5
    },
    {
        id: 3,
        name: 'Moon',
        horsepowers: 30,
        doors: 4,
        gear_type: 'manual',
        wheels: 4
    }
]

const selectedOptions = 
{
   horsepowers: 50,
   doors: 3,
   gear_type: null,
   wheels: null
}

let filtered = products.filter(e => {
  for(let [key, value] of Object.entries(selectedOptions))
  {
    if(value != null && e[key] != value)
      return false;
  }
  return true;
});

console.log(filtered);

However, if you really want to write it out, I'd just check if the option is set with a simple boolean check. !(null) returns true, so this would work.

return (!selectedOptions.horsepowers || selectedOptions.horsepowers == product.horsepowers) && ...

You could generate a filter array from selectedOptions and filter the entries and use this for filtering the data, later.

const
    products = [{ id: 1, name: 'Safari', horsepowers: 30, doors: 4, gear_type: 'automatic', wheels: 6 }, { id: 2, name: 'Jungle', horsepowers: 50, doors: 3, gear_type: 'automatic', wheels: 5 }, { id: 3, name: 'Moon', horsepowers: 30, doors: 4, gear_type: 'manual', wheels: 4 }],
    selectedOptions = { horsepowers: 50, doors: 3, gear_type: null, wheels: null },
    filter = Object
        .entries(selectedOptions)
        .filter(([, v]) => v !== null),
    result = products.filter(o => filter.every(([k, v]) => o[k] === v));

console.log(result);
    

• Using Object#entries and Array#filter, get the pairs with selected values from selectedOptions to use for filtering the products list
• Using Array#filter and Array#every, filter the list to make sure that resulting products match the above pairs

const 
  products = [ { id: 1, name: 'Safari', horsepowers: 30, doors: 4, gear_type: 'automatic', wheels: 6 }, { id: 2, name: 'Jungle', horsepowers: 50, doors: 3, gear_type: 'automatic', wheels: 5 }, { id: 3, name: 'Moon', horsepowers: 30, doors: 4, gear_type: 'manual', wheels: 4 } ],
  selectedOptions = { horsepowers: 50, doors: 3, gear_type: null, wheels: null };

const filterOptions = 
  Object.entries(selectedOptions).filter(([_, value]) => value !== null);
const selectedProducts = 
  products.filter(product =>
    filterOptions.every(([key, value]) => product[key] === value)
  );

console.log(selectedProducts);

本文标签： javascriptFilter array and compare but skip null valuesStack Overflow