Условная фильтрация не работает в реакции js

Я пытаюсь фильтровать с двумя условиями. В моей базе данных есть 3 значения: «Доставка», «Забрать» и «Оба». Оба значения означают доставку и самовывоз. Итак, я пытаюсь отфильтровать, когда пользователь ищет данные, имеющие значение доставки, он будет возвращать данные, но также я хочу, чтобы данные, имеющие оба значения, возвращали также эти данные.

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

Я пытаюсь так, но получаю пустой массив

updatedList.filter(
      (item) =>
        item.additional.itemPick === "Both" &&
        item.additional.itemPick.toLowerCase() === pickItem.toLowerCase()
    );

Мои данные

[
  {
    "_id": "62526de0b2540137f2a77b59",
    "additional": {
      "category": "Chinese",
      "rating": 9,
      "itemPick": "Both",
      "offer": 6
    },
    "name": "Consuelo Cameron"

  },
  {
    "_id": "62526de0d8ffb784e15ccc9e",

    "additional": {
      "category": "Italian",
      "rating": 6,
      "itemPick": "Both",
      "offer": 13
    },
    "name": "Susan Palmer"

  },
  {
    "_id": "62526de0de91084a9c71b50e",

    "additional": {
      "category": "Japanese",
      "rating": 7,
      "itemPick": "Take Away",
      "offer": 12
    },
    "name": "Meghan Mooney"
    
  },
  {
    "_id": "62526de0c3bdf5932586c610",

    "additional": {
      "category": "Vegitarian",
      "rating": 5,
      "itemPick": "Take Away",
      "offer": 10
    },
    "name": "Jody Lopez"
  },
  {
    "_id": "62526de0974a41b4cbd6827a",

    "additional": {
      "category": "Vegitarian",
      "rating": 6,
      "itemPick": "Both",
      "offer": 5
    },
    "name": "Kirsten Petersen"

  },
  {
    "_id": "62526de0e56f5f3c7d00ae47",

    "additional": {
      "category": "Italian",
      "rating": 10,
      "itemPick": "Both",
      "offer": 9
    },
    "name": "Garrison Mcbride"

  },
  {
    "_id": "62526de0a5c051722016c558",

    "additional": {
      "category": "Vegitarian",
      "rating": 8,
      "itemPick": "Delivery",
      "offer": 9
    },
    "name": "Jo Skinner"

  }
]

Ожидаемый результат, если пользователь выберет доставку

[
  {
    "_id": "62526de0b2540137f2a77b59",
    "additional": {
      "category": "Chinese",
      "rating": 9,
      "itemPick": "Both",
      "offer": 6
    },
    "name": "Consuelo Cameron"

  },
  {
    "_id": "62526de0d8ffb784e15ccc9e",

    "additional": {
      "category": "Italian",
      "rating": 6,
      "itemPick": "Both",
      "offer": 13
    },
    "name": "Susan Palmer"

  },


  {
    "_id": "62526de0974a41b4cbd6827a",

    "additional": {
      "category": "Vegitarian",
      "rating": 6,
      "itemPick": "Both",
      "offer": 5
    },
    "name": "Kirsten Petersen"

  },
  {
    "_id": "62526de0e56f5f3c7d00ae47",

    "additional": {
      "category": "Italian",
      "rating": 10,
      "itemPick": "Both",
      "offer": 9
    },
    "name": "Garrison Mcbride"

  },
  {
    "_id": "62526de0a5c051722016c558",

    "additional": {
      "category": "Vegitarian",
      "rating": 8,
      "itemPick": "Delivery",
      "offer": 9
    },
    "name": "Jo Skinner"

  }
]

Используйте || вместо &&

— 10.04.2022 12:54

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

— 10.04.2022 12:56

Если значение pickItem равно Delivery, произойдет именно это.

— 10.04.2022 12:57

Я пытаюсь так, но получаю пустой массив <---- вызвано: item.additional.itemPick === "Both" && item.additional.itemPick.toLowerCase() === pickItem.toLowerCase(). Убедитесь, что pickItem будет установлено на "Both" — и вы получите данные. Хотя понятно - это не то, что нужно. То, что нужно, я думаю, @Titus уже отметил выше.

— 10.04.2022 13:00

arrays javascript object filter reactjs

10.04.2022 12:51

3 метода стилизации элементов HTML

Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...

Формы c голосовым вводом в React с помощью Speechly

Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...

Flatpickr: простой модуль календаря для вашего приложения на React

Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....

В чем разница между Promise и Observable?

Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.

Что такое cURL в PHP? Встроенные функции и пример GET запроса

Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуй это!

const filterArray = (updatedListArray, itemPick) => {
  return updatedListArray.filter(
    (item) =>
      item.additional.itemPick === "Both" ||
      item.additional.itemPick === itemPick
  );
};

const updatedList = [
  {
    _id: "62526de0d8ffb784e15ccc9e",

    additional: {
      category: "Italian",
      rating: 6,
      itemPick: "Both",
      offer: 13,
    },
    name: "Susan Palmer",
  },
  // {... rest of it}
];

console.log("filter array with Delivery");
console.log(filterArray(updatedList, "Delivery"));
console.log("filter array with Take Away");
console.log(filterArray(updatedList, "Take Away"));