Angular пользовательский фильтр трубы после трубы KeyValue - PullRequest
0 голосов
/ 20 марта 2020

Я пытаюсь реализовать пользовательский фильтр после использования встроенного в Angular канала значения ключа

У меня есть массив со значениями, например

object= [
  { key: "Added_By", value: "Yi" },
  { key: "Assigned_To", value: "-" },
  { key: "Bought_Date", value: 43810 },
  { key: "Brand", value: "Samsung PM863" },
  { key: "Capacity", value: 3.84 },
]

Я хочу отфильтровать на основе нескольких входящих значений, но входящие значения варьируются, например

Это может быть 1 ключ / значение

Filter= [{ key: "Added_By", value: "Yi" }]// Return Object

или несколько

Filter= [{ key: "Added_By", value: "Yi" }, { key: "Bought_Date", value: 43810 }] //both matches return object

Filter= [{ key: "Added_By", value: "ABC" }, { key: "Bought_Date", value: 43810 }] //1 match but 1 doesn't return false

Я хочу вернуть объект, если все условия выполнены

Для одного ключа / значения, которое я пробовал

  let Key= Filter[0].key
  let Value=Filter[0].value
  let KeyFilter = object.filter(x => x.key === Key)
  if (KeyFilter[0].value.toString().toLowerCase().indexOf(Value.toLowerCase()) !== -1)
            return items

Но этот подход работает только тогда, когда в массиве фильтров присутствует 1 объект

1 Ответ

0 голосов
/ 20 марта 2020

Я создал функцию, которая принимает массив объектов и объект с парами ключ: значение .

Ключи объектов в массиве должны совпадать с ключами объекта для работы.

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

export const filterArray = (filterData, toBeFiltered) => {
  return toBeFiltered.filter(item => {
    for (const key in filterData) {
      if (item[key] === null || item[key] === undefined) {
        return false;
      } else {
        if (typeof filterData[key] === 'string') {
          if (!(item[key]).toLowerCase().includes((filterData[key].trim()).toLowerCase())) {
            return false;
          }
        } else if (item[key] !== filterData[key]) {
          return false;
        }
      }
    }
    return true;
  });
};

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...