applying various conditions to JavaScript arrays for filtering

Question

applying various conditions to JavaScript arrays for filtering

After spending countless hours trying to solve my filtering issue, I'm still struggling. I'm in the middle of creating a react marketplace where users need to be able to apply multiple filters on one page. Here's an example of my product list:

productsList = [{brand: 'Zara', category: 'Jeans', color: 'blue'}, {brand: 'BlaBla',color: 'blue', category: 'Leggins'}, {brand: 'Louis', category: 'Leggins', color: 'red'}, {brand: 'Louis', category: 'Jeans', color: 'pink'}]

In my state, I have an object containing various filter options:

filters: {
  designers: ['Zara', 'Louis'],
  categories: [],
  colors: ['pink']
}

If I only want to display Zara jeans that are blue, how can I effectively filter out the results? I've tried using lodash and other methods found online but haven't been successful yet. Any guidance would be greatly appreciated!

javascript arrays object filter lodash

Answer 1

Answer №1

To adapt the keys of filters to match the objects, consider creating a separate object to act as a translation between them.

Transform the filters into entries ([key, value]) and remove any empty entries (where the array is empty). Utilize Array.filter() to loop through the productList, checking if the current object's property is included for all existing entries.

const applyFilters = (filters, arr) => {
  const entries = Object.entries(filters)
    .filter(([, v]) => v.length)
  
  return arr.filter(o => 
    entries
      .every(([k, v]) => v.includes(o[k]))
  )
}

const productsList = [{brand: 'Zara', category: 'Jeans', color: 'blue'}, {brand: 'BlaBla',color: 'blue', category: 'Leggins'}, {brand: 'Louis', category: 'Leggins', color: 'red'}, {brand: 'Louis', category: 'Jeans', color: 'pink'}]

const filters = {
  brand: ['Zara', 'Louis'],
  category: [],
  color: ['pink']
}

const result = applyFilters(filters, productsList)

console.log(result)

Follow the same approach but with your original filter names and mapping them to object properties:

const filtersToProps = {
  designers: 'brand',
  categories: 'category',
  colors: 'color'
};

const applyFilters = (filters, arr) => {
  const entries = Object.entries(filters)
    .filter(([, v]) => v.length)
    .map(([k, v]) => [filtersToProps[k], v])
  
  return arr.filter(o => 
    entries
      .every(([k, v]) => v.includes(o[k]))
  )
}

const productsList = [{brand: 'Zara', category: 'Jeans', color: 'blue'}, {brand: 'BlaBla',color: 'blue', category: 'Leggins'}, {brand: 'Louis', category: 'Leggins', color: 'red'}, {brand: 'Louis', category: 'Jeans', color: 'pink'}]

const filters = {
  designers: ['Zara', 'Louis'],
  categories: [],
  colors: ['pink']
}

const result = applyFilters(filters, productsList)

console.log(result)

Answer 2

To adapt the keys of filters to match the objects, consider creating a separate object to act as a translation between them.

Transform the filters into entries ([key, value]) and remove any empty entries (where the array is empty). Utilize Array.filter() to loop through the productList, checking if the current object's property is included for all existing entries.

const applyFilters = (filters, arr) => {
  const entries = Object.entries(filters)
    .filter(([, v]) => v.length)
  
  return arr.filter(o => 
    entries
      .every(([k, v]) => v.includes(o[k]))
  )
}

const productsList = [{brand: 'Zara', category: 'Jeans', color: 'blue'}, {brand: 'BlaBla',color: 'blue', category: 'Leggins'}, {brand: 'Louis', category: 'Leggins', color: 'red'}, {brand: 'Louis', category: 'Jeans', color: 'pink'}]

const filters = {
  brand: ['Zara', 'Louis'],
  category: [],
  color: ['pink']
}

const result = applyFilters(filters, productsList)

console.log(result)

Follow the same approach but with your original filter names and mapping them to object properties:

const filtersToProps = {
  designers: 'brand',
  categories: 'category',
  colors: 'color'
};

const applyFilters = (filters, arr) => {
  const entries = Object.entries(filters)
    .filter(([, v]) => v.length)
    .map(([k, v]) => [filtersToProps[k], v])
  
  return arr.filter(o => 
    entries
      .every(([k, v]) => v.includes(o[k]))
  )
}

const productsList = [{brand: 'Zara', category: 'Jeans', color: 'blue'}, {brand: 'BlaBla',color: 'blue', category: 'Leggins'}, {brand: 'Louis', category: 'Leggins', color: 'red'}, {brand: 'Louis', category: 'Jeans', color: 'pink'}]

const filters = {
  designers: ['Zara', 'Louis'],
  categories: [],
  colors: ['pink']
}

const result = applyFilters(filters, productsList)

console.log(result)

Answer 3

Answer №2

const filteredProducts = productsList.filter(product => {
    return Object.keys(filters).every(key => {
        if (!filters[key].length) return true;
        switch (key) {
            case 'designers':
                return filters[key].includes(product.brand);
            case 'categories':
                return filters[key].includes(product.category);
            case 'colors':
                return filters[key].includes(product.color);
        }
    })
})

Answer 4

const filteredProducts = productsList.filter(product => {
    return Object.keys(filters).every(key => {
        if (!filters[key].length) return true;
        switch (key) {
            case 'designers':
                return filters[key].includes(product.brand);
            case 'categories':
                return filters[key].includes(product.category);
            case 'colors':
                return filters[key].includes(product.color);
        }
    })
})

applying various conditions to JavaScript arrays for filtering

Answer №1

Answer №2

Similar questions

UI-Router: What is the best way to access a page within my project without adding it as a State?

Determining special characters within a string using VueJS

Comparing Express.js View Engine to Manual Compilation

Explore various queries and paths within MongoDB Atlas Search

Assurance of retrieving information

The radio input is not being properly checked using ng-checked in Angular

Unable to generate this QUIZ (JavaScript, HTML)

Using JavaScript to create a dynamic to-do list that persists on the browser even when refreshed

Switch between GeoJSON layers by using an HTML button within Mapbox GL JS, instead of relying on traditional links

Navigating the changes of daylight savings time requires proper management

Add a click event to elements that match

How can I implement API redirection in my Node.js application?

The destruction of scope is not activated

Leverage the variable from one function in a different function within Three.js using Javascript

Use jQuery to detect the presence of the class .class, and if it exists, automatically append the same class to a specific #id element on a particular webpage

Troubleshooting: Unable to get the Bootstrap active navigation code to function

Guide to integrating the Google identity services library in a React application

The JavaScript code for summing two numbers is not functioning as expected

Utilize jQuery to convert text to lowercase before adding Capitalize CSS styling

Updating view with *ngIf won't reflect change in property caused by route change