Filtrowanie tablicy z wieloma warunkami – .filter()

W artykule przedstawię jak filtrować dane na podstawie wielu warunków. Przyda się do bardziej zaawansowanego filtrowania danych.

Jak działa .filter()?

Metoda .filter() zwraca nową tablicę na podstawie testu.

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Przykład z: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Do metody .filter() dodajemy warunki, które odfiltrują dane. Na powyższym przykładzie zostanie zwrócona nowa tablica ze słowami, których długość jest większa niż 6.

Filtrowanie i wiele warunków

Poniżej przedstawiam jak filtrować dane z wieloma warunkami.

1. Przykładowe dane

const data = [
    {
        id: 1,
        name: 'ipsum',
        country: 'us',
        color: 'blue',
    },
    {
        id: 2,
        name: 'ipsum',
        country: 'us',
        color: 'red',
    },
    {
        id: 3,
        name: 'dolor',
        country: 'gb',
        color: 'green',
    },
    {
        id: 4,
        name: 'amet',
        country: 'pl',
        color: 'white',
    },
];

Przygotowałem przykładowe dane – tablica obiektów.

2. Warunki filtrowania / zapytanie

const filterQuery = {
    name: 'ipsum',
    country: 'us',
}

Obiekt zawierający elementy, po których funkcja będzie filtrowała. Jako wartość można wstawić np. zawartość pola input.

3. Użycie metody filtrującej

const filteredData = data.filter(item => 
    Object.keys(filterQuery).every(key => item[key] === filterQuery[key])
);

W funkcji filtrującej zwracane są tylko te obiekty, które pasują do zapytania.

Efekt końcowy

Przydatne linki

.filter() – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

.keys() – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys

.every() – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every