Sorting through an array using several filter arrays

Question

Sorting through an array using several filter arrays

Is there a way to efficiently filter an array of items based on multiple filter arrays? Each item has various filters, and I want to display only the ones that match all selected filters.

const selectedFilters = {
    color: ["Red", "Blue"],
    type: ["Shirt"],
    size: ["M"]
};

const items = [
    {
        name: "Item 1",
        filters: {
            color: ["Red", "Blue", "Black"],
            type: ["Shirt"],
            size: ["M"]
        }
    },
    {
        name: "Item 2",
        filters: {
            color: ["Red"],
            type: ["Pants"],
            size: ["M"]
        }
    }
];

I'm attempting to address this issue by iterating through all items and checking if each one satisfies all selected filters.

const filterItems = (items, selectedFilters) => {
    const filterKeys = Object.keys(selectedFilters);

    return items.filter(item => {
        return filterKeys.every(key => {

            // Skip empty filters
            if (!selectedFilters[key].length) {
                return true;
            }

            return selectedFilters[key].every(filterWord => {
                item.filters[key].includes(filterWord);
            });
        });
    });
};

filterItems(items, selectedFilters);

Although the current implementation results in an empty array, the expected output should include the "Item 1" object.

javascript arrays filtering

Answer 1

Answer №1

To begin, generate an array containing the values of the selectedFilters as well as an array of values from the filters property. Next, utilize the every method on the selectedFilters array to verify if all values within it are included in the filters array.

const selectedFilters = {
    color: ["Red", "Blue"],
    type: ["Shirt"],
    size: ["M"]
};

const items = [
    {
        name: "Item 1",
        filters: {
            color: ["Red", "Blue", "Black"],
            type: ["Shirt"],
            size: ["M"]
        }
    },
    {
        name: "Item 2",
        filters: {
            color: ["Red"],
            type: ["Pants"],
            size: ["M"]
        }
    }
];

const filterArr = Object.values(selectedFilters).flat();

const output = items.filter(({filters}) => {
    const objFilters = Object.values(filters).flat();
    return filterArr.every(val => objFilters.includes(val));
})
console.log(output);

Answer 2

To begin, generate an array containing the values of the selectedFilters as well as an array of values from the filters property. Next, utilize the every method on the selectedFilters array to verify if all values within it are included in the filters array.

const selectedFilters = {
    color: ["Red", "Blue"],
    type: ["Shirt"],
    size: ["M"]
};

const items = [
    {
        name: "Item 1",
        filters: {
            color: ["Red", "Blue", "Black"],
            type: ["Shirt"],
            size: ["M"]
        }
    },
    {
        name: "Item 2",
        filters: {
            color: ["Red"],
            type: ["Pants"],
            size: ["M"]
        }
    }
];

const filterArr = Object.values(selectedFilters).flat();

const output = items.filter(({filters}) => {
    const objFilters = Object.values(filters).flat();
    return filterArr.every(val => objFilters.includes(val));
})
console.log(output);

Answer 3

Answer №2

To validate that at least one element is present in the array and the function requires a boolean return value, you can utilize the some method.

The some() method checks if there is at least one element in the array that satisfies the condition specified by the provided function. It then returns a Boolean value.

const selectedFilters = {"color":["Red","Blue"],"type":["Shirt"],"size":["M"]}
const items = [{"name":"Item 1","filters":{"color":["Red","Blue","Black"],"type":["Shirt"],"size":["M"]}},{"name":"Item 2","filters":{"color":["Red"],"type":["Pants"],"size":["M"]}}]

const filterItems = (items, selectedFilters) => {
  const filterKeys = Object.keys(selectedFilters);
  return items.filter(item => {
    return filterKeys.every(key => {
      return selectedFilters[key].some(filterWord => {   //Utilize some method
        return item.filters[key].includes(filterWord);   //Return a boolean value
      });
    })
  });
};

var result = filterItems(items, selectedFilters);
console.log(result);

Condensed version:

const selectedFilters = {"color":["Red","Blue"],"type":["Shirt"],"size":["M"]};

const items = [{"name":"Item 1","filters":{"color":["Red","Blue","Black"],"type":["Shirt"],"size":["M"]}},{"name":"Item 2","filters":{"color":["Red"],"type":["Pants"],"size":["M"]}}];

const filterItems = (items, selectedFilters) => {
  const fkeys = Object.keys(selectedFilters);
  return items.filter(i => fkeys.every(k => selectedFilters[k].some(o => i.filters[k].includes(o))));
};

const result = filterItems(items, selectedFilters);
console.log(result);

Answer 4

To validate that at least one element is present in the array and the function requires a boolean return value, you can utilize the some method.

The some() method checks if there is at least one element in the array that satisfies the condition specified by the provided function. It then returns a Boolean value.

const selectedFilters = {"color":["Red","Blue"],"type":["Shirt"],"size":["M"]}
const items = [{"name":"Item 1","filters":{"color":["Red","Blue","Black"],"type":["Shirt"],"size":["M"]}},{"name":"Item 2","filters":{"color":["Red"],"type":["Pants"],"size":["M"]}}]

const filterItems = (items, selectedFilters) => {
  const filterKeys = Object.keys(selectedFilters);
  return items.filter(item => {
    return filterKeys.every(key => {
      return selectedFilters[key].some(filterWord => {   //Utilize some method
        return item.filters[key].includes(filterWord);   //Return a boolean value
      });
    })
  });
};

var result = filterItems(items, selectedFilters);
console.log(result);

Condensed version:

const selectedFilters = {"color":["Red","Blue"],"type":["Shirt"],"size":["M"]};

const items = [{"name":"Item 1","filters":{"color":["Red","Blue","Black"],"type":["Shirt"],"size":["M"]}},{"name":"Item 2","filters":{"color":["Red"],"type":["Pants"],"size":["M"]}}];

const filterItems = (items, selectedFilters) => {
  const fkeys = Object.keys(selectedFilters);
  return items.filter(i => fkeys.every(k => selectedFilters[k].some(o => i.filters[k].includes(o))));
};

const result = filterItems(items, selectedFilters);
console.log(result);

Answer 5

Answer №3

If you're looking to tackle this issue, the Array.filter() function is your best friend. Check out this simple yet powerful solution below:

Array.prototype.diff = function(arr2) {
    var ret = [];
    for(var i in this) {   
        if(arr2.indexOf(this[i]) > -1){
            ret.push(this[i]);
        }
    }
    return ret;
};

var filteredArr = items.filter(function (el) {
  return el.filters.color.diff(selectedFilters.color).length > 0 &&
         el.filters.type.diff(selectedFilters.type).length > 0 &&
         el.filters.size.diff(selectedFilters.size).length > 0
});

Check out this working example for reference:

Keep in mind: feel free to adjust the AND / OR condition based on your specific needs.

Answer 6

If you're looking to tackle this issue, the Array.filter() function is your best friend. Check out this simple yet powerful solution below:

Array.prototype.diff = function(arr2) {
    var ret = [];
    for(var i in this) {   
        if(arr2.indexOf(this[i]) > -1){
            ret.push(this[i]);
        }
    }
    return ret;
};

var filteredArr = items.filter(function (el) {
  return el.filters.color.diff(selectedFilters.color).length > 0 &&
         el.filters.type.diff(selectedFilters.type).length > 0 &&
         el.filters.size.diff(selectedFilters.size).length > 0
});

Check out this working example for reference:

Keep in mind: feel free to adjust the AND / OR condition based on your specific needs.

Answer 7

Answer №4

There are several ways to tackle this issue. For instance, your approach is correct, but we must eliminate the curly brackets {} within each callback function like so:

filterWord => item.filters[key].includes(filterWord)

Another possibility is to transform the selectedFilters into a filterValues array by utilizing the flat() method. This function generates a new array by recursively concatenating all sub-array elements. We then extract the filters from each item and convert them into an itemFilters array using the flat() method once again. Next, we attempt to match them with the filterValues array by combining the every() and includes() methods. These methods assess whether all elements in one array include the elements from another filter array.

The third approach closely resembles your solution. Here, we extract the keys from the selectedFilters and store them in a types array. Subsequently, for each type, we invoke the some() method in conjunction with the includes() method to determine if at least one element in the array is present in items.filters[type].

Below is the implementation:

const selectedFilters = {
    color: ['Red', 'Blue'],
    type: ['Shirt'],
    size: ['M']
};

const items = [
    {
        name: 'Item 1',
        filters: {
            color: ['Red', 'Blue', 'Black'],
            type: ['Shirt'],
            size: ['M']
        }
    },
    {
        name: 'Item 2',
        filters: {
            color: ['Red'],
            type: ['Pants'],
            size: ['M']
        }
    },
    {
        name: 'Item 3',
        filters: {
            color: ['Green', 'Blue', 'Red'],
            type: ['Shirt'],
            size: ['S']
        }
    },
    {
        name: 'Item 4',
        filters: {
            color: ['Red', 'Blue'],
            type: ['Shirt'],
            size: ['M']
        }
    },
};

const filterItems = (items, selectedFilters) => {
    const filterKeys = Object.keys(selectedFilters);
    
    return items.filter(item => {
        return filterKeys.every(key => {
            // Ignore empty filters
            if (!selectedFilters[key].length) {
                return true;
            }
            return selectedFilters[key].every(filterWord => item.filters[key].includes(filterWord));
        });
    });
};

const results = filterItems(items, selectedFilters);

console.log('Your option: ');
results.forEach(function (item, key) {
console.log('Name: ', item.name);
});

const filterValues = Object.values(selectedFilters).flat();
const results2 = items.filter(({filters}) => {
    const itemFilters = Object.values(filters).flat();
    return filterValues.every(filter => itemFilters.includes(filter));
})

console.log('Second option: ');
results2.forEach(function (item, key) {
console.log('Name: ', item.name);
});
 

const types = Object.keys(selectedFilters);
const results3 = items.filter(
    item => types.every(
        type => selectedFilters[type].some(
            filter => item.filters[type].includes(filter)
      )
    )
);

console.log('Third option: ');
results3.forEach(function (item, key) {
console.log('Name: ', item.name);
});

Answer 8

There are several ways to tackle this issue. For instance, your approach is correct, but we must eliminate the curly brackets {} within each callback function like so:

filterWord => item.filters[key].includes(filterWord)

Another possibility is to transform the selectedFilters into a filterValues array by utilizing the flat() method. This function generates a new array by recursively concatenating all sub-array elements. We then extract the filters from each item and convert them into an itemFilters array using the flat() method once again. Next, we attempt to match them with the filterValues array by combining the every() and includes() methods. These methods assess whether all elements in one array include the elements from another filter array.

The third approach closely resembles your solution. Here, we extract the keys from the selectedFilters and store them in a types array. Subsequently, for each type, we invoke the some() method in conjunction with the includes() method to determine if at least one element in the array is present in items.filters[type].

Below is the implementation:

const selectedFilters = {
    color: ['Red', 'Blue'],
    type: ['Shirt'],
    size: ['M']
};

const items = [
    {
        name: 'Item 1',
        filters: {
            color: ['Red', 'Blue', 'Black'],
            type: ['Shirt'],
            size: ['M']
        }
    },
    {
        name: 'Item 2',
        filters: {
            color: ['Red'],
            type: ['Pants'],
            size: ['M']
        }
    },
    {
        name: 'Item 3',
        filters: {
            color: ['Green', 'Blue', 'Red'],
            type: ['Shirt'],
            size: ['S']
        }
    },
    {
        name: 'Item 4',
        filters: {
            color: ['Red', 'Blue'],
            type: ['Shirt'],
            size: ['M']
        }
    },
};

const filterItems = (items, selectedFilters) => {
    const filterKeys = Object.keys(selectedFilters);
    
    return items.filter(item => {
        return filterKeys.every(key => {
            // Ignore empty filters
            if (!selectedFilters[key].length) {
                return true;
            }
            return selectedFilters[key].every(filterWord => item.filters[key].includes(filterWord));
        });
    });
};

const results = filterItems(items, selectedFilters);

console.log('Your option: ');
results.forEach(function (item, key) {
console.log('Name: ', item.name);
});

const filterValues = Object.values(selectedFilters).flat();
const results2 = items.filter(({filters}) => {
    const itemFilters = Object.values(filters).flat();
    return filterValues.every(filter => itemFilters.includes(filter));
})

console.log('Second option: ');
results2.forEach(function (item, key) {
console.log('Name: ', item.name);
});
 

const types = Object.keys(selectedFilters);
const results3 = items.filter(
    item => types.every(
        type => selectedFilters[type].some(
            filter => item.filters[type].includes(filter)
      )
    )
);

console.log('Third option: ');
results3.forEach(function (item, key) {
console.log('Name: ', item.name);
});

Answer 9

Answer №5

checkFilters = (data)=>{
    let result = true;
    for(item in data) {
            if(item == 'filters') {
                let filterObj = data[item];  
                for(filterKey in filterObj) {
                    for(selectedFilterKey in selectedFilters) {         
                        if(selectedFilterKey == filterKey) {
                            selectedFilters[selectedFilterKey].forEach(value=>{
                                 if(!filterObj[filterKey].includes(value)){
                                    result = false;
                                }
                            })
                        }
                    }
                }
            }
        }
    return result;
}
items.filter((data,index,arr)=> checkFilters(data))

Answer 10

checkFilters = (data)=>{
    let result = true;
    for(item in data) {
            if(item == 'filters') {
                let filterObj = data[item];  
                for(filterKey in filterObj) {
                    for(selectedFilterKey in selectedFilters) {         
                        if(selectedFilterKey == filterKey) {
                            selectedFilters[selectedFilterKey].forEach(value=>{
                                 if(!filterObj[filterKey].includes(value)){
                                    result = false;
                                }
                            })
                        }
                    }
                }
            }
        }
    return result;
}
items.filter((data,index,arr)=> checkFilters(data))

Sorting through an array using several filter arrays

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Transforming a relation by breaking down an array to output one row for each entry in the array

Iterate over JSON elements beginning with a specific pattern

If I deselect an item, the "check all" option does not become deselected

Implement a dynamic table in real-time with jQuery AJAX by fetching data from JSON or HTML files

Is there a way to sort a table using a dropdown menu selection as a filter?

Transforming varied JavaScript objects into a serial form

Retrieve the concealed division element's HTML content along with its formatting

Different ways to analyze elements from 2 arrays to hone in on specific values

"Switching to the active tab in Bootstrap has been updated

What is the best way to save the output of an asynchronous (AJAX) function in a variable?

Utilizing dynamic meta tags in React JS with a PHP backend and Redux integration

How to format numbers in JavaScript post calculations

The Firebase function that reloads the auth currentUser is not refreshing properly within a Vue component

Activate a drop-down feature to refresh the page with a link attached

How can you implement a bootstrap navigation bar in a vue.js project?

JavaScript syntax issue detected, semicolon missing

Utilizing a Chrome profile is ineffective in WebdriverIO

verifying if checkbox is selected using a while loop in PHP

Guide on subscribing to an object from a service in Angular 2/5

Guide on generating and inserting numerous dynamic form sections into a MySQL database