对象数组中的过滤器数组

Igor 发表于 Dev

伊戈尔

我有这个数组：

[
  {
    "title": "fruit",
    "categories": [
      "apple",
      "banana"
    ]
  },
  {
    "title": "city",
    "categories": [
      "Brazil",
      "EUA",
      "China"
    ]
  },
  {
    "title": "name",
    "categories": [
      "Ana"
    ]
  }
]

我想通过用户输入的任何术语来过滤它

我已经得到了这个，仅适用于标题，但我想按标题和类别搜索：

array.filter(f => f.title.includes(myString))

某些表演

用交替||使用.some的检查f.categories：

array.filter(f =>
  f.title.includes(myString) ||
  f.categories.some(
    category => category.includes(myString)
  )
);

现场演示：

const array = [
  {
    "title": "fruit",
    "categories": [
      "apple",
      "banana"
    ]
  },
  {
    "title": "city",
    "categories": [
      "Brazil",
      "EUA",
      "China"
    ]
  },
  {
    "title": "name",
    "categories": [
      "Ana"
    ]
  }
];

const input = document.querySelector('input');
input.addEventListener('input', () => {
  document.querySelector('div').textContent = JSON.stringify(
    array.filter(f =>
      f.title.includes(input.value) ||
      f.categories.some(
        category => category.includes(input.value)
      )
    )
  );
});

<input>
<div></div>

这不是您的原始代码正在实现的逻辑，但如果您还需要检查不同的大小写匹配：

const array = [
  {
    "title": "fruit",
    "categories": [
      "apple",
      "banana"
    ]
  },
  {
    "title": "city",
    "categories": [
      "Brazil",
      "EUA",
      "China"
    ]
  },
  {
    "title": "name",
    "categories": [
      "Ana"
    ]
  }
];

const input = document.querySelector('input');
input.addEventListener('input', () => {
  const value = input.value.toLowerCase();
  document.querySelector('div').textContent = JSON.stringify(
    array.filter(f =>
      f.title.toLowerCase().includes(value) ||
      f.categories.some(
        category => category.toLowerCase().includes(value)
      )
    )
  );
});