Угловой 6 полевой фильтр - PullRequest
Новая
       12

Угловой 6 полевой фильтр

0 голосов
/ 11 ноября 2018

В настоящее время я работаю над приложением Angular 6. У меня есть огромный список статей, и я хочу отфильтровать его. Прямо сейчас он работает в режиме реального времени, нет кнопки для отправки параметров фильтра, все это происходит по мере ввода. Я придумаю способ, но у него все еще есть некоторые проблемы, которые я могу исправить, но мне не нравится, как я это сделал. Я уверен, что должно быть что-то более элегантное.

Для лучшего воображения эти статьи имеют категорию, заголовок, автора, теги. Я могу отфильтровать их по категориям, скажем ... но я хочу сделать какую-то фильтрацию.

Пример: отфильтруйте все статьи из категории «спорт», затем отфильтруйте все статьи, в заголовке которых есть подстрока «цель», из этого уже отфильтрованного массива, затем отфильтруйте тех, чей автор «Джон», а затем отфильтруйте все по тегу «хоккей».

Я закончил с огромным количеством заявлений IF, что, я бы сказал, не является правильным подходом. Можете ли вы порекомендовать мне лучший способ сделать это?

1 Ответ

0 голосов
/ 11 ноября 2018

Это то, что вы можете сделать, чтобы создать мультифильтр без множества операторов if.

Шаг первый: Создайте объект, который выполняет различные функции сравнения: 

let compareFunctions = {
    equal: function(a,b) {
        return a === b;
    },
    in: function(a,b){
        return a.indexOf(b) !== -1
    }
}

Шаг второй: Создайте функцию, имеющую следующие параметры:

  1. ключ - ключ поля вашей записи, который вы хотите отфильтровать.
  2. значение - значение, которое вы хотите отфильтровать по
  3. compareFn - функция сравнения, которая будет использоваться для этого поля

Эта функция возвращает функцию, которая выполняет условие. 

function condition(key, value, comparFn = compareFunctions.equal) {
    return function(data) {
        return comparFn(data[key],value);
    }
}

Шаг третий: Создайте массив с функциями «condition», представляющими значения вашего фильтра: 

let filterArray = [
    condition('category', 'sports'),
    condition('title', 'goal', compareFunctions.in),
    condition('author', 'john'),
    condition('tags', 'hokey', compareFunctions.in),
]

Шаг четвертый: Отфильтруйте свою запись, вызвав массив функций условий для каждой записи и оценив результат каждого условия: 

let result = dataset.filter(y => {
    let resolved = filterArray.map(x => x(y))
    return resolved.every(x => x === true);
})

Полный пример кода: 

let compareFunctions = {
    equal: function(a,b) {
        return a === b;
    },
    in: function(a,b){
        return a.indexOf(b) !== -1
    }
}

function condition(key, value, comparFn = compareFunctions.equal) {
    return function(data) {
        return comparFn(data[key],value);
    }
}

let dataset = [
    {
        category: "sports",
        title: "goal goal goal",
        author: "john",
        tags: ["hokey", "ice-hokey"]
    },
    {
        category: "news",
        title: "bla bla",
        author: "Timo",
        tags: ["news"]
    },
    {
        category: "news",
        title: "blub blub",
        author: "alex",
        tags: ["hokey", "ice-hokey"]
    },
    {
        category: "sports",
        title: "Kölner Haie bla bla",
        author: "Timo",
        tags: ["hokey", "ice-hokey"]
    }
]

let filterArray = [
    condition('category', 'sports'),
    condition('title', 'goal', compareFunctions.in),
    condition('author', 'john'),
    condition('tags', 'hokey', compareFunctions.in),
]

//console.log(filterArray)

let result = dataset.filter(y => {
    let resolved = filterArray.map(x => x(y))
    return resolved.every(x => x === true);
})

console.log(result)
...