[英]Filter an Array based off user input string and menu dropdown items
I am struggling to filter an array in one of my react projects. 我正在努力在我的一个React项目中过滤一个数组。
My React App has a search bar that returns a searchQuery as a string and menu of movement patterns that when clicked gets added to the pattern array. 我的React App带有一个搜索栏,该搜索栏以字符串和运动模式菜单返回searchQuery,单击该运动模式后,菜单会添加到模式数组中。 The user should be able to:
用户应该能够:
const searchQuery = "ben"; const pattern = []; const exercises = [ { name: "bench press", movement: ["push", "pull", "squat", "hinge"] }, { name: "squat", movement: ["push", "pull", "squat", "hinge"] }, { name: "squat", movement: ["squat", "hinge"] }, { name: "pushup", movement: ["push", "pull", "squat", "hinge"] }, { name: "pullup", movement: ["pull", "squat", "hinge"] }, { name: "bent over row", movement: ["push", "pull", "hinge"] } ]; let filteredExercises = []; if (searchQuery && pattern) { filteredExercises = exercises.filter( exercise => exercise.name.toLowerCase().indexOf(searchQuery) !== -1 && exercise.movement.some(movement => pattern.some(pattern => pattern == movement) ) ); } else if (pattern.length > 0) { filteredExercises = exercises.filter(exercise => exercise.movement.some(movement => pattern.some(pattern => pattern == movement) ) ); } else if (searchQuery) { filteredExercises = exercises.filter( exercise => exercise.name.toLowerCase().indexOf(searchQuery) !== -1 ); console.log(filteredExercises); } console.log(filteredExercises);
The first two conditional statements work and return the correct data. 前两个条件语句起作用并返回正确的数据。 As soon as I add the third conditional statement to filter by searchQuery I get an empty array in return.
一旦添加第三个条件语句以通过searchQuery进行过滤,我就会得到一个空数组。
Can anyone help with this? 有人能帮忙吗?
An empty array is truthy which means your first if
is firing when pattern
is empty — it never makes it to your last else if
. 空数组是正确的 ,这意味着您在
pattern
为空时会触发您的第一个if
-它不会使else if
变为最后一个。 You can test for pattern.length
instead and it should work 您可以改为测试
pattern.length
,它应该可以工作
const searchQuery = "ben"; const pattern = []; const exercises = [ { name: "bench press", movement: ["push", "pull", "squat", "hinge"] }, { name: "squat", movement: ["push", "pull", "squat", "hinge"] }, { name: "squat", movement: ["squat", "hinge"] }, { name: "pushup", movement: ["push", "pull", "squat", "hinge"] }, { name: "pullup", movement: ["pull", "squat", "hinge"] }, { name: "bent over row", movement: ["push", "pull", "hinge"] } ]; let filteredExercises = []; if (searchQuery && pattern.length) { filteredExercises = exercises.filter( exercise => exercise.name.toLowerCase().indexOf(searchQuery) !== -1 && exercise.movement.some(movement => pattern.some(pattern => pattern == movement) ) ); } else if (pattern.length > 0) { filteredExercises = exercises.filter(exercise => exercise.movement.some(movement => pattern.some(pattern => pattern == movement) ) ); } else if (searchQuery) { filteredExercises = exercises.filter( exercise => exercise.name.toLowerCase().indexOf(searchQuery) !== -1 ); console.log(filteredExercises); } console.log(filteredExercises);
I think checking the array as a truthy value instead of the length of the array was your biggest issue. 我认为将数组作为真实值而不是数组的长度进行检查是您最大的问题。
However, I also think this could be written more simply by moving the repeated code to functions and just running one filter
. 但是,我也认为可以通过将重复的代码移至函数并仅运行一个
filter
来更简单地编写此代码。 If you don't like ternary operators you can replace what I have with your if
/ if else
clauses (don't forget the returns though). 如果您不喜欢三元运算符,则可以用
if
/ if else
子句替换我的三元运算符(尽管不要忘记返回值)。
const searchQuery = "ben"; const pattern = []; const exercises = [ { name: "bench press", movement: ["push", "pull", "squat", "hinge"] }, { name: "squat", movement: ["push", "pull", "squat", "hinge"] }, { name: "squat", movement: ["squat", "hinge"] }, { name: "pushup", movement: ["push", "pull", "squat", "hinge"] }, { name: "pullup", movement: ["pull", "squat", "hinge"] }, { name: "bent over row", movement: ["push", "pull", "hinge"] } ]; const excerciseTest = (name, searchQuery) => { return name.toLowerCase().includes(searchQuery.toLowerCase()) } const patternTest = (movement, pattern) => { return movement.some(movement => { return pattern.some(pattern => pattern === movement) }) } const filteredExercises = exercises.filter(excercise => { // if (searchQuery && pattern.length > 0) return (searchQuery && pattern.length > 0) ? excerciseTest(excercise.name, searchQuery) && patternTest(excercise.movement, pattern) // else if (pattern.length > 0) : pattern.length > 0 ? patternTest(excercise.movement, pattern) // else if (searchQuery) : searchQuery ? excerciseTest(excercise.name, searchQuery) : false }) console.log(filteredExercises)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.