Массивы фильтров в javascript

У меня есть массивы фильтров, и мне нужно получить элементы, которые имеют эти фильтры в фильтрах элементов .fruit и veg, и мне нужно получить элементы, которые имеют оба фильтра. Как лучше фильтровать товары?

fruitfilter: [] = [{fruitname: "apple"} , {fruitname:"orange"}]
vegetablefilter: [] = [{vegetablename:"tomato"}, {vegetablename:"potato"}]

items: [] = [{fruitname: "apple", vegetablename:"tomato"},
                     {fruitname: "melon", vegetablename:"onion"},
                     {fruitname: "banana", vegetablename:"onion"}]
result: [] = [{fruitname: "apple", vegetablename:"tomato"}]

Что вы пробовали до сих пор?

— 30.04.2019 10:38

Эта платформа предназначена для того, чтобы помочь вам после того, как вы приложили все усилия. Поэтому, пожалуйста, попробуйте решить это самостоятельно и задайте вопрос, если вы застряли.

— 30.04.2019 10:41

@DoğancanArabacı, я попробовал одно решение, в котором сначала фильтруются фрукты, а затем овощи, но иногда эти фильтры могут быть пустыми. не знаете, как справиться с этим?

— 30.04.2019 10:43

javascript typescript

30.04.2019 10:35

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Просто проверьте с includes. Вам нужно будет немного изменить типы данных для сравнения с массивом объектов — для этого предназначены fruit и vegitable:

const fruitfilter = [{fruitname: "apple"} , {fruitname:"orange"}];
const vegitablefilter = [{vegitablename:"tomato"}, {vegitablename:"potato"}];
const items = [{fruitname: "apple", vegitablename:"tomato"},{fruitname: "melon", vegitablename:"onion"},{fruitname: "banana", vegitablename:"onion"}];
const fruit = fruitfilter.map(({ fruitname }) => fruitname);
const vegitable = vegitablefilter.map(({ vegitablename }) => vegitablename);
const result = items.filter(item => item.fruitname ? fruit.includes(item.fruitname) : vegitable.includes(item.vegitablename));
console.info(result);

Спасибо за быстрый ответ. Я получаю пустой массив, когда один из массивов фильтров пуст.

— 30.04.2019 11:00

30.04.2019 10:40

Ответ принят как подходящий

Вы можете использовать filter и some следующим образом:

const fruitfilter=[{fruitname:"apple"},{fruitname:"orange"}],
      vegetablefilter=[{vegetablename:"tomato"},{vegetablename:"potato"}],
      items=[{fruitname:"apple",vegetablename:"tomato"},{fruitname:"melon",vegetablename:"onion"},{fruitname:"banana",vegetablename:"onion"}];

const result = 
  items.filter(i => fruitfilter.some(f => f.fruitname === i.fruitname)
                     && vegetablefilter.some(v => v.vegetablename === i.vegetablename))

console.info(result)

Если фильтры могут быть пустыми, вы можете проверить, пусты ли они, используя length

const result = 
  items.filter(i => (!fruitfilter.length || fruitfilter.some(f => f.fruitname === i.fruitname))
                     && (!vegetablefilter.length || vegetablefilter.some(v => v.vegetablename === i.vegetablename)))

Спасибо за быстрый ответ. Это решение не работает, когда один из фильтров пуст.

— 30.04.2019 10:58

30.04.2019 10:41