JSFiddle - React, Tailwind, and code Playground
by Hugo Carneiro
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
JavaScript
var selectedFilters = ['business', 'marketing', 'app', 'something'];
var allClasses = ['app', 'business', 'marketing'];
var data = [
{
id: 1,
classes: ['business', 'marketing']
},
{
id: 2,
classes: ['app', 'marketing']
},
{
id: 3,
classes: ['business', 'app', 'marketing']
}
];
console.log(data);
function filterList() {
var filteredData = _.filter(data, function(row) {
var filters = [];
row.classes.forEach(function(singleClass) {
filters.push(singleClass);
});
// Normalise array for comparisson
selectedFilters = _.sortBy(selectedFilters);
filters = _.sortBy(filters);
var matched = [];
selectedFilters.forEach(function(filter) {
matched.push(filters.indexOf(filter) >= 0);
});
// If "_.includes" returns TRUE
// we actually want to return FALSE to _.filter
return !_.includes(matched, false);
});
console.log(filteredData);
}
filterList();