Javascript фильтр поиска в массиве

Question

У меня есть сценарий, с предоставленным примером JSON data:

[{
   "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"], это покажет Джо и Кэндис.

Вопрос в том, как я могу найти возраст с множественным выбором?

Ожидаемый результат:

• Выберите 23-26 только покажет Бек и Кэндис
• Выберите >27 только покажет Джо
• Выберите оба покажет Бек, Кэндис и Джо

Спасибо за любой ответ.

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

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

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

код, подобный этому

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

этот массив возвращаемых лиц, которые совпадают в массиве возрастов

вывод:

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

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

Вам нужно использовать 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;
})

Этот код возвращает нас Джо информация:

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