在對象數組中過濾數組

Question

我有這個數組：

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

我想通過用戶輸入的任何術語來過濾它

我已經得到了這個，僅適用於標題，但我想按標題和類別搜索：

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

Answer 1

與||交替使用對f.categories進行.some檢查：

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) ) ) ); });

 <input> <div></div>

Answer 2

如果您只想要與您的標題和類別匹配的項目，則可以執行此操作以獲取匹配數組。

array.filter(f => f.title === 'myTitle' && f.categories.includes('myCategory'));

Answer 3

如果您只想按標題或類別過濾，我認為這就足夠了

 const array = [ { "title": "fruit", "categories": [ "apple", "banana" ] }, { "title": "city", "categories": [ "Brazil", "EUA", "China" ] }, { "title": "name", "categories": [ "Ana" ] } ] const string = 'Brazil'// whatever the user types const result = array.filter(f => f.title === string || f.categories.includes(string)) console.log(result);