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

Question

Я использую angular 8 с ядром asp. net, поэтому я хочу отобразить имя клиента в раскрывающемся списке в алфавитном порядке из службы API, я нашел единственное решение для использования наблюдаемого. Есть ли другой способ реализовать это? и как я могу использовать алфавитный вид в наблюдаемом?

getAllcustomer() {
    return this._http.get<any>(this.myAppUrl + '/api/users/getcustomer', {responseType: 'json'} )
      .catch(this.errorHandler);
}

Спасибо

Answer 1

Вы можете сделать это, используя метод sort(). Цитирование из ссылки MDN на sort():

Метод sort() сортирует элементы массива на месте и возвращает отсортированный массив. Порядок сортировки по умолчанию - возрастающий, он основан на преобразовании элементов в строки и сравнении их последовательностей значений кодовых единиц UTF-16.

Попробуйте выполнить следующее:

Добавить map метод к вашим импортам:

import { map, catchError } from 'rxjs/operators';
// ...

Использовать pipe для объединения rx js методов

getAllcustomer() {
  return this._http.get<any>(this.myAppUrl + '/api/users/getsuppliers', {responseType: 'json'} ).pipe(
    map(response => response.sort(),
    catchError(this.errorHandler));
}

Предполагая, что структура ответа выглядит следующим образом:

['ccc', 'aba', 'aaa']

Answer 2

Observables, Проще говоря, , это поток данных, мы используем наблюдения с вызовами API (в вашем случае asp. net).

что вы пытаетесь sort - это данные (ответ), полученные из API, а не сами наблюдаемые. Здесь у вас есть два варианта: либо вы сортируете, используя каналы (операторы Rx js) в самом сервисе, либо вы сортируете обычный массив JS в компоненте (где вы подписываетесь на наблюдение).

in услуга

getAllcustomer() {
    return this._http.get<any>(
                    this.myAppUrl + '/api/users/getcustomer',
                    {responseType: 'json'})
            .pipe(
                map(res => res.sort((a,b) => a.name - b.name);),
                catchError(this.errorHandler()) // use catch inside the pipe
            );
}

или в составе

this._customerService.getAllcustomer().subscribe(data => {
     const sortedData = data.sort((a,b) => a.name - b.name);
})

Answer 3

Вы можете отобразить ответ:

getAllcustomer() {
    return this._http.get<any>(this.myAppUrl + '/api/users/getcustomer', {responseType: 'json'} ).pipe(
  // assuming this API call gives you all the customers as an array of strings.
  map((response: any) => response.sort()), 
)
      .catch(this.errorHandler);
}

Чтобы включить эту сортировку в службу, необязательно, вы также можете выполнить сортировку в самом компоненте.