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

#javascript #arrays #reactjs #object

#javascript #массивы #reactjs #объект

Вопрос:

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

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

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

Теперь мне нужно выполнить фильтрацию по этим парам ключ / значение:

Тип (твердая древесина, wpc, spc, ламинат, винил)
Ширина (4,6)
Длина (6, 12, 24)
Цвет (коричневый, средний, серый, светлый)
Отделка (woca, уретан)
Поверхность (гладкая, с потертостями, с проволочной щеткой)

Итак, если кто-то проверяет лиственные породы, винил и коричневый — здесь должны отображаться продукты, соответствующие лиственным, или виниловым И коричневым.

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

1. Как должен выглядеть отфильтрованный массив?

2. @MiroslavGlamuzina Будет удалена та же структура, что и в исходном массиве, за исключением несоответствующих элементов. В любом случае, мне удалось найти решение, и, похоже, оно работает… gist.github.com/jherax/f11d669ba286f21b7a2dcff69621eb72

Ответ №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);

1. Спасибо, но на самом деле color в параметрах будет массив, поскольку он может быть коричневым, серым и т.д. В любом случае, я нашел ответ, который искал gist.github.com/jherax/f11d669ba286f21b7a2dcff69621eb72

2. О, хорошо @geochanto, я исправлю свой ответ.