Javascript filter Array of objects with multiple conditions and values

Question

Working in react/nextjs, I'm setting up filtering on the front-end for data props based on user input with checkboxes.

Data looks something like this (obviously much longer):

[{id: 8211,
title: "ABC",
type: "hardwood",
length: "5",
width: "10",
color: "brown",
finish: "WOCA",
surface: "distressed",
},
{
id: 8208,
title: "DEF",
type: "vinyl",
length: "10",
width: "4",
color: "",
finish: "Urethane",
surface: "smooth",
}]

Now I need to filter by these key/value pairs:

Type (hardwood, wpc, spc, laminate, vinyl)
Width (4,6)
Length (6, 12, 24)
Color (brown, medium, grey, light)
Finish (woca, urethane)
Surface (smooth, distressed, wire-brushed)

So if someone checks hardwood, vinyl, and brown - this should display products that match hardwood OR vinyl AND brown.

Now I'm not exactly sure how to proceed. I can capture the user input and store it in an object (possibly using arrays inside object). But I can't seem to figure out how to then filter my original props object based on that.

@MiroslavGlamuzina The same structure as the original array, except non-matching items would be removed. Anyway, I managed to find a solution and it seems to be working... gist.github.com/jherax/f11d669ba286f21b7a2dcff69621eb72 — geochanto
– geochanto, Commented Mar 21, 2019 at 1:09

Jack Bashford · Accepted Answer · 2019-03-21 01:17:47Z

2

You can take an object with the checked options, and then filter the data based on that:

const data = [{
    id: 8211,
    title: "ABC",
    type: "hardwood",
    length: "5",
    width: "10",
    color: "brown",
    finish: "WOCA",
    surface: "distressed",
  },
  {
    id: 8208,
    title: "DEF",
    type: "vinyl",
    length: "10",
    width: "4",
    color: "",
    finish: "Urethane",
    surface: "smooth",
  }
];

const options = {
  color: ["brown", "randomColor"]
};

const filtered = data.filter(obj => Object.keys(options).some(key => {
  if (key != "color") {
    return obj[key] == options[key];
  } else {
    return options[key].some(s => s == obj[key]);
  }
}));

console.log(filtered);

ES5 syntax:

var data = [{
    id: 8211,
    title: "ABC",
    type: "hardwood",
    length: "5",
    width: "10",
    color: "brown",
    finish: "WOCA",
    surface: "distressed",
  },
  {
    id: 8208,
    title: "DEF",
    type: "vinyl",
    length: "10",
    width: "4",
    color: "",
    finish: "Urethane",
    surface: "smooth",
  }
];

var options = {
  color: "brown"
};

var filtered = data.filter(function(obj) {
  return Object.keys(options).some(function(key) {
    if (key != "color") {
      return obj[key] == options[key];
    } else {
      return options[key].some(function(s) {
        return s == obj[key];
      });
  })
});

console.log(filtered);

edited Mar 21, 2019 at 1:17

answered Mar 21, 2019 at 1:00

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

geochanto Over a year ago

Thanks but actually color in the options would be an array, since it can be brown AND grey, etc. Anyway, I've found the answer I was looking for gist.github.com/jherax/f11d669ba286f21b7a2dcff69621eb72

Jack Bashford Over a year ago

Oh, OK @geochanto, I'll fix my answer.

Collectives™ on Stack Overflow

Javascript filter Array of objects with multiple conditions and values

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related