Блог

Главная - Вопросы по программированию - Фильтровать массив на основе динамических объектов и значений в JS

Фильтровать массив на основе динамических объектов и значений в JS

#javascript #arrays #reactjs #object #array-filter

#javascript #массивы #reactjs #объект #массив-фильтр

Вопрос:

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

Мой массив

 cocktailList = [
  Object {
    "abv": "24",
    "alcoholic": "true",
    "strength": "medium",
    "type": Object {
      "key": 3,
      "label": "Medium",
      "value": "medium",
    ...,
    ...,
    },
  },
  Object {
    ...
  },
]

и я вызываю функцию для фильтрации массива, передавая 2 параметра:

  • поле, по которому я хочу фильтровать
  • значение, которое он должен отфильтровать

Это моя функция и вызывающий объект

 const drinkTypeHandler = (field, value) => {       
    const selectedType = cocktailList.filter((cocktail) => cocktail.field === value);
    console.log(selectedType); 
}

onPress={() => drinkTypeHandler(item.field, item.value)}

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

 cocktailList.filter((cocktail) => `cocktail.${field} === ${value}`)

Если я жестко закодирую значение поля, оно сработает

 i.e.
cocktailList.filter((cocktail) => cocktail.type.value === value)

Ответ №1:

Чтобы использовать динамическое имя поля, вы должны использовать квадратные скобки. Итак, вы бы использовали:

cocktailList.filter((cocktail) => cocktail[field] === value)

Проблема, с которой вы столкнетесь, — это вложенные пары ключ / значение type , поскольку вы не можете использовать что-то подобное type.value с этой нотацией.

Комментарии:

1. спасибо @veddermatic — Есть ли какое-либо решение для доступа к вложенным парам ключ / значение?

2. Не простой однострочный. Вам нужно будет посмотреть, была ли функция вызвана с "type" field параметром, а затем вернуть value туда свойство или использовать второй параметр для вложенного поиска: cocktail[field][subfield]

3. Это отлично, мне удалось легко найти решение, следуя вашему объяснению. Я разделяю параметр как [поле] [подполе] и добавляю проверку. В зависимости от значения флага я могу использовать коктейль [поле] или коктейль [поле] [подполе]. Большое спасибо

4. Потрясающе! Рад, что вы это поняли.

Ответ №2:

Вы можете сделать это с помощью cocktail[field] :

 const drinkTypeHandler = (field, value) => {       
    const selectedType = cocktailList.filter((cocktail) => cocktail[field] === value);
    console.log(selectedType); 
}

Ответ №3:

Чтобы получить доступ к свойству объекта с помощью переменной, вам необходимо использовать точечную нотацию

 const drinkTypeHandler = (field, value) => {       
    const selectedType = cocktailList.filter((cocktail) => cocktail[field] === value);
    console.log(selectedType); 
}

Вы можете прочитать больше о скобках и точечных обозначениях здесь