Javascript filter Массив объектов с несколькими условиями и значениями

Question

Работая в реагировании / следующем сеансе, я настраиваю фильтрацию во внешнем интерфейсе для реквизита данных на основе пользовательского ввода с флажками.

Данные выглядят примерно так (очевидно, гораздо дольше):

[{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",
}]

Теперь мне нужно отфильтровать по следующим парам ключ / значение:

• Тип (лиственные, ПВХ, SPC, ламинат, винил)
• Ширина (4,6)
• Длина (6, 12, 24)
• Цвет (коричневый, средний, серый, светлый)
• Отделка (Woca, уретан)
• Поверхность (гладкая, проблемная, проволочная)

Так что, если кто-то проверяет лиственные, виниловые и коричневые - это должно отображать продукты, которые соответствуют лиственной древесине ИЛИ винил И коричневый.

Теперь я не совсем уверен, как поступить. Я могу захватить пользовательский ввод и сохранить его в объекте (возможно, используя массивы внутри объекта). Но я не могу понять, как затем фильтровать мой оригинальный объект реквизита на основе этого.

Answer 1

Вы можете взять объект с отмеченными параметрами, а затем filter данные, основанные на этом:

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:

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);