[英]Javascript array search filter
I have the scenario, with provided example JSON data:我有场景,提供示例 JSON 数据:
[{
"name": "Joe",
"age": "28",
"hobby": ["Reading", "Chilling", "Cycling"]
},
{
"name": "Beck",
"age": "25",
"hobby": ["Drinking", "Cycling"]
},
{
"name": "Candace",
"age": "24",
"hobby": ["Reading", "Singing"]
}]
Let's say the array above are shown in some list in web page.假设上面的数组显示在网页的某个列表中。
I have 2 (two) search dropdown with multiple selection to search name and age.我有 2(两个)搜索下拉列表,其中包含多项选择来搜索姓名和年龄。
For searching hobby, my code is (in ReactJS):为了搜索爱好,我的代码是(在 ReactJS 中):
filteredPersons = this.state.personList.filter( person =>{
return person.hobby.some(v=> filterHobby.indexOf(v) !== -1)
});
which is:即:
personList
is list of array from JSON above; personList
是来自上面 JSON 的数组列表;filterHobby
is list of array from multiple select, ex: if filterHobby = ["Reading","Singing"]
, it will show Joe and Candace. filterHobby
是来自多个选择的数组列表,例如:如果filterHobby = ["Reading","Singing"]
,它将显示 Joe 和 Candace。 The question is, how can I search for age with multiple selection?问题是,如何通过多项选择搜索年龄?
Expected result:预期结果:
23-26
only will show Beck and Candace23-26
将显示 Beck 和 Candace>27
only will show Joe>27
only将显示 JoeThank you for any answer.谢谢你的任何回答。
You could take an object with all filters and another for keeping function for getting the ages of the objects.您可以使用一个带有所有过滤器的对象,另一个用于保持获取对象年龄的功能。
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; }
You need use filter
function for filtering an array.您需要使用
filter
函数来过滤数组。
We have an array with persons:我们有一个包含人的数组:
const persons = [
{
"name": "Joe",
"age": "28",
"hobby": ["Reading", "Chilling", "Cycling"]
},
{
"name": "Beck",
"age": "25",
"hobby": ["Drinking", "Cycling"]
},
{
"name": "Candace",
"age": "24",
"hobby": ["Reading", "Singing"]
}
]
And then we will filter that array:然后我们将过滤该数组:
persons.filter((person) => {
return person.age > 27;
})
This code returns us Joe 's info:此代码返回给我们Joe的信息:
[
{
"name": "Joe",
"age": "28",
"hobby": ["Reading", "Chilling", "Cycling"]
}
]
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;
}
})
You may create additional function ageComparer
for convenience为方便起见,您可以创建附加功能
ageComparer
const ageComparer = (ageRange, age) => (ageRange === '23-26' ? (age >= 23 && age <= 26) : age >=27)
And then utilize it during filtering然后在过滤过程中使用它
// 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)))
For search person by its age, you can make an array of a selected age like this.对于按年龄搜索人员,您可以像这样制作一个选定年龄的数组。
let ages = ['23','24','25'];
code like this像这样的代码
persons.filter(item=> {return ages.indexOf(item.age)!== -1 })
this return person array which are matches in ages array这个返回 person 数组,这些数组在 Ages 数组中匹配
output:输出:
[
{ name: 'Beck', age: '25', hobby: [ 'Drinking', 'Cycling' ] },
{ name: 'Candace', age: '24', hobby: [ 'Reading', 'Singing' ] }
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.