Использование оператора If в Array.Filter

Я использую Array.Filter как:

  this.newData = this.allData.filter(imp =>   
       imp.name.toLowerCase().includes(((filter.name) ? filter.name.toLowerCase() : imp.name.toLowerCase())) &&
       imp.type === ((filter.type) ? filter.type: imp.type) &&
       imp.createdBy.toLowerCase().includes(((filter.createdBy) ? filter.createdBy.toLowerCase() : imp.createdBy.toLowerCase()))
  )

Но мое imp.name иногда может быть нулевым, поэтому код выдает ошибку.

Как я могу добавить оператор if внутри фильтра, чтобы, если какие-либо данные были нулевыми, не добавляйте их в AND.

Что-то типа

if(imp.name!=null){
  imp.name.toLowerCase().includes(((filter.name) ? filter.name.toLowerCase() : imp.name.toLowerCase()))
}

Надеюсь, я ясно.

можете ли вы вставить данные, т.е. значение фильтра и значения this.allData?

JackOfAshes - Mohit Gawande 22.05.2019 16:12

Используйте обычную функцию и возвращайте true или false по мере необходимости...

Heretic Monkey 22.05.2019 16:16

@HereticMonkey Я фильтрую это на основе всех условий, которые состоят из 3 условий, как в моем примере. Если я использую индивидуальный if else и возвращаю true false, как будут объединяться результаты. Так что в основном это критерии поиска. Если выбранный фильтр соответствует массиву, верните отфильтрованный список, иначе верните все.

Brenda 22.05.2019 16:22

Поэтому определите логическое значение вверху, которое показывает, удовлетворяет ли элемент фильтру. Установите значение true или false в зависимости от различных проверок, которые вы делаете. Я предполагаю, что если какое-либо из условий не выполняется, его не следует включать в список? Просто выполните var passedFilter = true; passedFilter = passedFilter && (condition1); passedFilter = passedFilter && (condition2);... и т. д. По базовой логической логике, если какие-либо из них ложны, они не будут включены.

Heretic Monkey 22.05.2019 16:26

См. проверка оператора if на наличие нескольких логических условий, чтобы узнать больше о том, как это сделать.

Heretic Monkey 22.05.2019 16:28
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
5
5 007
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Для достижения ожидаемого результата используйте приведенную ниже опцию использования imp && imp.name в первой строке фильтра.

imp.name && imp.name.toLowerCase().includes(((filter.name)

Кодепен — https://codepen.io/nagasai/pen/EzowXb?editors=1010

рабочий код:

var allData = [{name: null , type: "A", createdBy: 'test1'},
              {name: 'aaaa' , type: "AB", createdBy: 'test12'},
              {name: 'bbbb' , type: "AA", createdBy: 'test13'},]

var filter = {name: 'bbbb' , correctionType: "AA", createdBy: 'test13'}

 var newData = allData.filter(imp =>   
       imp.name && imp.name.toLowerCase().includes(((filter.name) ? filter.name.toLowerCase() : imp.name.toLowerCase())) &&
       imp.type === ((filter.type) ? filter.correctionType : imp.type) &&
       imp.createdBy.toLowerCase().includes(((filter.createdBy) ? filter.createdBy.toLowerCase() : imp.createdBy.toLowerCase()))
  )
 
 console.log(newData)
Ответ принят как подходящий

Если вы хотите проверить, существует ли фильтр, и использовать его, только если он существует, я бы сделал что-то вроде этого:

items.filter(imp => {
      let keep = true;
      if (imp.name) {
        keep = keep && imp.toLowerCase().includes(filter.name ? filter.name.toLowerCase() : imp.name.toLowerCase());
      }
      if (imp.type) {
        keep = keep && imp.type === (filter.type ? filter.correctionType : imp.type);
      }
      if (imp.createdBy) {
        keep = keep && imp.createdBy.toLowerCase().includes(filter.createdBy? filter.createdBy.toLowerCase(): imp.createdBy.toLowerCase());
      }
      return keep;
    });

Лично я считаю, что это пример чрезмерного использования троичных элементов. Потребовалось некоторое время, чтобы понять логику, и даже тогда я думаю, что это не решает точную требуемую фильтрацию.

Фильтр здесь не показан, поэтому мы можем только догадываться.

this.newData = this.allData.filter(imp => {
    // Check if the properties we'll call methods on, are true-ty values.
    if ( !imp.name || !imp.createdBy ) return false;
    // imp.name.toLowerCase().includes( imp.name.toLowerCase()) is always true.
    // So the only way the name is invalid,
    // is if filter.name exists AND filter.name is not included inside imp.name.
    // So !filter.name gives us true if filter.name does not exist
    // and also makes sure filter.name exists before we try to use toLowerCase();
    const valid_name = !filter.name || imp.name.toLowerCase().includes( filter.name.toLowerCase());
    // Same here imp.type will always equal imp.type, so the ternary is redundant again.
    // The type will only be false if imp.type does not equal filter.correctionType
    const valid_type = !filter.type || imp.type === filter.correctionType;
    // Same again
    const valid_creation = !filter.createdBy || imp.createdBy.toLowerCase().includes( filter.createdBy.toLowerCase());
    // All 3 have to be true.
    return valid_name && valid_type && valid_creation;
});

Другие вопросы по теме