Фильтрация массива на основе пользовательской строки ввода и выпадающих пунктов меню

Question

Я пытаюсь отфильтровать массив в одном из моих реактивных проектов.

В приложении My React есть панель поиска, которая возвращает searchQuery в виде строки и меню шаблонов движения, которые при нажатии добавляются в массив шаблонов.Пользователь должен иметь возможность:

1. ввести поисковый запрос и отфильтровать массив
2. использовать меню, чтобы выбрать несколько вариантов шаблона для фильтрации массива
3. отфильтроватьмассив упражнений с поиском и выбором меню.

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

Первые два условных выражения работают и возвращают правильные данные.Как только я добавляю третий условный оператор для фильтрации по searchQuery, я получаю пустой массив в ответ.

Кто-нибудь может помочь с этим?

Answer 1

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

Тем не менее, я также думаю, что это можно было бы написать проще, переместив повторяющийся код в функции и простоработает один filter.Если вам не нравятся троичные операторы, вы можете заменить то, что у меня есть, вашими предложениями 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)

Answer 2

Пустой массив равен truey , что означает, что ваш первый if срабатывает, когда pattern пуст - он никогда не достигает вашего последнего else if.Вместо этого вы можете проверить 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);