сделать объект отсортированным после фильтрации - PullRequest
Новая
       52

сделать объект отсортированным после фильтрации

0 голосов
/ 11 сентября 2018

У меня возникла проблема при попытке отобразить отсортированные предложения с помощью response-bootstrap-typeahead.

JSON 

{
  "Code": "ABC",
  "Name": "Random City, Town Office (ABC), Random Country",
  "CityName": "Random City",
  "CityCode": "ABC",
  "CountryName": "Random Country",
  "CountryCode": "XY",
  "Field": "Town Office"
},
{
  "Code": "CBA",
  "Name": "Random City, Town Office (CBA), Random Country",
  "CityName": "City",
  "CityCode": "CBA",
  "CountryName": "Country",
  "CountryCode": "CC",
  "Field": "Town Office"
}

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

Я попытался передать данные обратного вызова из filterBy из typeahead в массив и отсортировать их, но, поскольку JSON из службы являетсяне отсортированы и данные обратного вызова случайные, не могут достичь того же.

Есть ли другой способ добиться того же? 

<Typeahead
  {...this.state.typeProps}
  labelKey="Name"
  placeholder="Enter Origin..."
  bsSize="large"
  onChange={(selected) => {
    this.setState({ selected });
  }}
  filterBy={(option, props) => {
    if (this.filterAndPush(option, props)) {
      return true;
    }
    return false;
  }}
                }}
  options={this.state.originData}
  selected={this.state.selected}
/>

filterData = (option, props) => {
  const { text } = props;
  const { CityName, CityCode } = option;
  if (text) {
    if (CityName.toLowerCase().includes(text.toLowerCase())) {
      return true;
    } else if (CityCode.toLowerCase().includes(text.toLowerCase())) {
      return true;
    }
    return false;
  }
  return false;
}

filterAndPush = (option, props) => {
  //debugger;
  if (this.filterData(option, props)) {
    debugger;
    this.filterResultSet.push(option);
    this.filterResultSet.sort((a, b) => {
      if (a.CityName < b.CityName)
        return -1;
      if (a.CityName > b.CityName)
        return 1;
      return 0;
    });
    return true;
  }
  return false;
}

1 Ответ

0 голосов
/ 12 сентября 2018

Существует два способа сортировки данных:

1) Предварительно отсортируйте параметры перед передачей их в options проп. Учитывая ваш сценарий, это, вероятно, самый простой подход. В вашем методе render просто сделайте следующее: 

const options = this.state.originData.sort(sortCallback);

return (
  <Typeahead
    ...
    options={options}
  />
);

2) Сортировать отфильтрованные результаты , используя renderMenu. Посмотрите пример пользовательского меню , чтобы увидеть это в действии. По сути, вы можете передать обратный вызов, который получает отфильтрованные результаты и отобразить их так, как вы хотите: 

_renderMenu(results, menuProps) {
  const items = results.sort(sortCallback);

  return (
    <Menu {...menuProps}>
      {items.map((item, index) => {
        <MenuItem key={index} option={item} position={index}>
          {...}
        </MenuItem>
      })}
    </Menu>
  );
}


render() {
  return (
    <Typeahead
      ...
      renderMenu={this._renderMenu}
    />
  );
}
...