javascript - 根据多项选择过滤对象数组

Question

我有一个看起来像这样的对象数组

[
    {
        id: 101,
        name: 'Alex',
        tg: 'REV001',
        eng: 'IP'
    },
    {
        id: 102,
        name: 'Bob',
        tg: 'REV002',
        eng: 'CAD'
    },
    {
        id: 103,
        name: 'Carl',
        tg: 'REV001',
        eng: 'OPP'
    },
    {
        id: 104,
        name: 'Dave',
        tg: 'REV003',
        eng: 'IP'
    },
    {
        id: 105,
        name: 'Jeffry',
        tg: 'REV005',
        eng: 'OPP'
    },
]

我还有3个选择框，就像

// Name select
<select>
  <option value="">All</option>
  <option value="Alex">Alex</option>
  <option value="Bob">Bob</option>
  <option value="Carl">Carl</option>
  <option value="Dave">Dave</option>
  <option value="Jeffry">Jeffry</option>
</select>

// TG select
<select>
  <option value="">All</option>
  <option value="REV001">REV001</option>
  <option value="REV002">REV002</option>
  <option value="REV003">REV003</option>
  <option value="REV005">REV005</option>
</select>

// ENG select
<select>
  <option value="">All</option>
  <option value="IP">IP</option>
  <option value="CAD">CAD</option>
  <option value="OPP">OPP</option>
</select>

这些选择框显示数组中存在的所有可能值，根据名称、TG 和 ENG 进行分类。

我想根据从这些选择输入中选择的选项来过滤数据。

例如，

如果我的 Name 全部为 Name，ENG 全部为 all，TG 为 REV001，那么它应该过滤数据数组并获得一个新数组，其中仅包含 TG 为 REV001 的对象。

我已经有要求更改值的事件，只需要有关如何根据所选选项过滤数据的逻辑。一个函数，它应该从原始数据返回一个新的过滤数据数组。

我试着创建一个像

这样的变量

  filteredSearch: any = {
    NAME: 'All',
    ENG: 'All',
    TG: 'All'
  }

并写了一个类似

的方法

  onFilterSearch() {
    this.filteredList = [];
    this.requestData.forEach(element => {
      for (let key in this.filteredSearch) {
        if (!(this.filteredSearch[key] === '')) {
          if (element.header[key].includes(this.filteredSearch[key])) {
            this.filteredList.push(element);
          }
        } 
      }
    });
  }

我正在更改 filteredSearch，因为选择输入已更改并调用 onFilterSearch()。但这对我不起作用，也许我在这里遗漏了一些东西。

Answer 1

请在下面找到逻辑和代码片段:

逻辑:

var filteredData = data.filter(e => { 
  return (!nameSelect || e.name === nameSelect) && (!tgSelect || e.tg === tgSelect) && (!engSelect || e.eng === engSelect);
});

代码片段:

// Name select
<select id="nameSelect">
  <option value="">All</option>
  <option value="Alex">Alex</option>
  <option value="Bob">Bob</option>
  <option value="Carl">Carl</option>
  <option value="Dave">Dave</option>
  <option value="Jeffry">Jeffry</option>
</select>
// TG select
<select id="tgSelect">
  <option value="">All</option>
  <option value="REV001">REV001</option>
  <option value="REV002">REV002</option>
  <option value="REV003">REV003</option>
  <option value="REV005">REV005</option>
</select>
// ENG select
<select id="engSelect">
  <option value="">All</option>
  <option value="IP">IP</option>
  <option value="CAD">CAD</option>
  <option value="OPP">OPP</option>
</select>
<br/>
<button id="filterBtn" type="button">Filter</button>
<script>
var data = [
    {
        id: 101,
        name: 'Alex',
        tg: 'REV001',
        eng: 'IP'
    },
    {
        id: 102,
        name: 'Bob',
        tg: 'REV002',
        eng: 'CAD'
    },
    {
        id: 103,
        name: 'Carl',
        tg: 'REV001',
        eng: 'OPP'
    },
    {
        id: 104,
        name: 'Dave',
        tg: 'REV003',
        eng: 'IP'
    },
    {
        id: 105,
        name: 'Jeffry',
        tg: 'REV005',
        eng: 'OPP'
    },
];

function filterData(data) {
  var nameSelect = document.getElementById("nameSelect");
  nameSelect = nameSelect.options[nameSelect.selectedIndex].value;
  var tgSelect = document.getElementById("tgSelect");
  tgSelect = tgSelect.options[tgSelect.selectedIndex].value;
  var engSelect = document.getElementById("engSelect");
  engSelect = engSelect.options[engSelect.selectedIndex].value;
  var filteredData = data.filter((e) => { 
    return (!nameSelect || e.name === nameSelect) && (!tgSelect || e.tg === tgSelect) && (!engSelect || e.eng === engSelect);
  });
  console.log(filteredData);
}

document.getElementById("filterBtn").addEventListener("click", e => {
  filterData(data);
});
</script>