Comparing various object fields to a single input value in JavaScript

Question

Comparing various object fields to a single input value in JavaScript

I have a challenge with filtering a large dataset of products based on user input values. Here is an example of my product dataset:

const products = [
  {id: 0, name: "Product1", brand: "Theraflu", itemCode: "THE110", price: 5.45},
  {id: 1, name: "Product2", brand: "Benadryl", itemCode: "BEN121", price: 7.05},
  {id: 2, name: "Product3", brand: "Listerine", itemCode: "LIS204", price: 4.55},
  {id: 3, name: "Product4", brand: "Tylenol", itemCode: "TYL116", price: 6.10},
];

I managed to filter the products using different fields in each product object like this:

const keys = ["name", "brand", "itemCode"];

const getFilteredProducts = (filterText) => {
  const newProducts = products.filter(product => keys.some(key => product[key].toLowerCase().includes(filterText.toLowerCase())));
  
  return newProducts;
}

console.log(getFilteredProducts("Tylenol"));

The problem arises when I try to combine different fields for filtering, such as:

console.log(getFilteredProducts("product4 Tylenol"));

Unfortunately, this returns an empty array. Is there a way to address this issue without modifying the current filtering functionality?

javascript arrays filter

Answer 1

Answer №1

If you're looking to filter products based on multiple keywords in the filterText, you can try something like this:

const attributes = ["name", "brand", "itemCode"];

const getFilteredProducts = (filterText) => {
  const searchWords = filterText.split(" ");
  const filteredProducts = [];

  for (const word of searchWords) {
    filteredProducts.push(
      products.filter(product => attributes.some(attribute =>
        product[attribute].toLowerCase().includes(word.toLowerCase())
      ))
    );  
  }

  return [].concat(...filteredProducts).filter((value, index, self) => 
    self.findIndex((m) => m.id === value.id) === index
  );
}

console.log(getFilteredProducts("Tylenol Product3"));

Answer 2

If you're looking to filter products based on multiple keywords in the filterText, you can try something like this:

const attributes = ["name", "brand", "itemCode"];

const getFilteredProducts = (filterText) => {
  const searchWords = filterText.split(" ");
  const filteredProducts = [];

  for (const word of searchWords) {
    filteredProducts.push(
      products.filter(product => attributes.some(attribute =>
        product[attribute].toLowerCase().includes(word.toLowerCase())
      ))
    );  
  }

  return [].concat(...filteredProducts).filter((value, index, self) => 
    self.findIndex((m) => m.id === value.id) === index
  );
}

console.log(getFilteredProducts("Tylenol Product3"));

Comparing various object fields to a single input value in JavaScript

Answer №1

Similar questions

Benefits of utilizing Boomerang library over Resource Timing API

React scroll not triggering class changes

Conceal a div element after redirecting to a different HTML page

The issue lies with Express Mongoose failing to store the data

The error message "express-validator - req.checkBody does not exist" indicates that the

Combine multiple arrays of JSON objects into a single array while ensuring no duplicates

Top method for creating integration tests in React using Redux and Enzyme

When the state of the grandparent component is updated, the React list element vanishes in the grandchild component. Caution: It is important for each child in a list to have a unique

Tips for aligning the timer on a client's webpage with the server

Enhanced jQuery Embed Code validation for user input using a textarea

How can Symfony, Jquery, and Ajax work together to append elements to themselves?

Show/Hide a row in a table with a text input based on the selected dropdown choice using Javascript

What is the best way to manage the input mask?

Verification of symmetrical file formatting

Experiment with catching an exception on variable `v`

Where does the 'Execution Context Destroyed' error originate from in my code?

text/x-handlebars always missing in action

The Angular filter received an undefined value as the second parameter

Exploring nested optgroup functionality in React.js

Encountered an issue while attempting npm install, with the error message "Error: Undefined variable standalone_static_library in binding.gyp" and node-sass chokidar error