Javascript 數組搜索過濾器

Question

我有場景，提供示例 JSON 數據：

[{
   "name": "Joe",
   "age": "28",
   "hobby": ["Reading", "Chilling", "Cycling"]
},
{
   "name": "Beck",
   "age": "25",
   "hobby": ["Drinking", "Cycling"]
},
{
   "name": "Candace",
   "age": "24",
   "hobby": ["Reading", "Singing"]
}]

假設上面的數組顯示在網頁的某個列表中。

我有 2（兩個）搜索下拉列表，其中包含多項選擇來搜索姓名和年齡。

• 對於名稱，假設它顯示了所有不同的愛好（閱讀、放松、騎自行車、喝酒、唱歌）。
• 對於年齡，假設它有 2 個年齡范圍選項：23-26 和 > 27。

為了搜索愛好，我的代碼是（在 ReactJS 中）：

filteredPersons = this.state.personList.filter( person =>{
  return person.hobby.some(v=> filterHobby.indexOf(v) !== -1)
});

即：

• personList是來自上面 JSON 的數組列表；
• filterHobby是來自多個選擇的數組列表，例如：如果filterHobby = ["Reading","Singing"] ，它將顯示 Joe 和 Candace。

問題是，如何通過多項選擇搜索年齡？

預期結果：

• 僅選擇23-26將顯示 Beck 和 Candace
• 選擇>27 only將顯示 Joe
• 選擇兩者將顯示貝克、坎迪斯和喬

謝謝你的任何回答。

Answer 1

您可以使用一個帶有所有過濾器的對象，另一個用於保持獲取對象年齡的功能。

 var data = [{ name: "Joe", age: "28", hobby: ["Reading", "Chilling", "Cycling"] }, { name: "Beck", age: "25", hobby: ["Drinking", "Cycling"] }, { name: "Candace", age: "24", hobby: ["Reading", "Singing"] }], functions = { '23-26': ({ age }) => age >= 23 && age <= 26, '>27': ({ age }) => age > 27 }, filters = { hobby: ["Reading", "Cycling"], age: ['23-26'] }, result = data.filter(o => filters.hobby.some(v => o.hobby.includes(v)) && filters.age.some(fn => functions[fn](o)) ); console.log(result);

 .as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

您需要使用filter函數來過濾數組。

我們有一個包含人的數組：

const persons = [
    {
       "name": "Joe",
       "age": "28",
       "hobby": ["Reading", "Chilling", "Cycling"]
    },
    {
       "name": "Beck",
       "age": "25",
       "hobby": ["Drinking", "Cycling"]
    },
    {
       "name": "Candace",
       "age": "24",
       "hobby": ["Reading", "Singing"]
    }
]

然后我們將過濾該數組：

persons.filter((person) => {
    return person.age > 27;
})

此代碼返回給我們Joe的信息：

[
  {
    "name": "Joe",
    "age": "28",
    "hobby": ["Reading", "Chilling", "Cycling"]
  }
]

Answer 3

ageFilters = ['23-26','>27']
selectedFilter = '23-26';

filteredPersons = this.state.persons.filter(({age}) => {
 const _age = parseInt(age);
 if(selectedFilter === '23-26') {             // "23-26"
  return (_age>=23) && (_age<=26);
 } else if(selectedFilter === '>27') {                          // "27"
  return (_age>27);
 } else {
  return true;
 }
})

Answer 4

為方便起見，您可以創建附加功能ageComparer

const ageComparer = (ageRange, age) => (ageRange === '23-26' ? (age >= 23 && age <= 26) : age >=27)

然后在過濾過程中使用它

// ageFilter will be taken from drom down
const ageFilter = ['23-26'];

person.filter(p => p.hobby.some(v=> filterHobby.indexOf(v) !== -1) && ageFilter.some(a => ageComparer(a, +p.age)))

Answer 5

對於按年齡搜索人員，您可以像這樣制作一個選定年齡的數組。

let ages = ['23','24','25'];

像這樣的代碼

persons.filter(item=> {return ages.indexOf(item.age)!== -1 })

這個返回 person 數組，這些數組在 Ages 數組中匹配

輸出：

[
  { name: 'Beck', age: '25', hobby: [ 'Drinking', 'Cycling' ] },
  { name: 'Candace', age: '24', hobby: [ 'Reading', 'Singing' ] }
]