Блог

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

 export interface IMyObjectFromAPI {
   status: {
      id: number,
      description: string,
      location: string,
      name: string,
      imageUrl: string
  }
}

var filteredByTerms: string[] = [];
var resultsFromAPI: IMyObjectFromAPI [] = [];
var filteredDataResults: IMyObjectFromAPI[] = [];
 

Я сохраняю возвращаемые результаты от вызова api в resultsFromAPI массив.

В пользовательском интерфейсе у меня есть группа флажков на основе стран, которая заполняется циклом через массив стран. При выборе флажка я запускаю следующий код. Опять же, цель здесь состоит в том, чтобы добавить несколько элементов в массив терминов для фильтрации (поэтому я хочу фильтровать по местоположению имени).

 filterDataResults(term: string) {
  var indexOfTerm = this.filteredByTerms.indexOf(term);
  // if the term is not in an array of terms to filter by, add it
  if (indexOfTerm === -1) {
   this.filteredByTerms.push(term);
   this.filteredDataResults = this.resultsFromAPI.filter(x => x.location === 
                              this.filteredByTerms.includes(term));
  }
   else {
     this.filteredByTerms.splice(indexOfTerm, 1);
     this.filteredDataResults = this.resultsFromAPI.filter(x => x.location === 
                                this.filteredByTerms.includes(term));
  }
}
 

Я не знаю, правильно ли я это объясняю, но я приложил картинку, чтобы помочь. Ряд флажков слева, набор данных справа, и флажки могут быть кумулятивными (так, в примере с изображением, если я выберу ITContractor и Clinical Psychology, функция filter будет искать что-то в результатах, возвращаемых из API, что актуализирует оба условия.

Похоже, что некоторые HOF и map фильтров могут помочь вам организовать определяемую пользователем логику / фильтрацию.

 const filters = {
  lastHourFilter: (result) => result.postedDate > Date.now() - ms('1 hour'),
  last24HoursFilter: (result) => result.postedDate > Date.now() - ms('24 hours'),
  ...
  itContractorFilter: generateSpecialismFilter('IT Contractor'),
  clinicalPsychologyFilter: generateSpecialismFilter('Clinical Psychology'),
  ...
  fullTimeFilter: generateJobTypeFilter('Full Time'),
  temporaryFilter: generateJobTypeFilter('Temporary')
}
 

Затем вы проверяете флажки и определяете, какие фильтры следует применить к результатам. Что-то вроде:

 function applyFilters(results) {
  Object.keys(filters).forEach((key) => {
    if (checkboxes[key].checked) results = 
  results.filter(filters[key]);
  });
  return results;
}
 

Здесь флажки — это карта флажков в DOM, индексируемых теми же ключами, что и ваши фильтры.