Угловой 6 сорт JSON от наблюдаемого по ключу - PullRequest
0 голосов
/ 28 сентября 2018

Примечание: я знаю, как сортировать обычный массив объектов, используя .sort(), но на этот раз я застрял с наблюдаемой, и я не знаком с ней.

Iя извлекаю массив объектов JSON со службой:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class MockDataService {

  private dataUrl = 'assets/data';

  constructor(private http: HttpClient) {}

  get(filename: string) {
    return this.http.get(`${this.dataUrl}/${filename}`);
  }

}

С помощью этой службы мы можем просто передать имя файла json и получить наблюдаемое:

import { Component, OnInit } from '@angular/core';
import { MockDataService } from '../../shared/services/mock-data.service';
import { ObservableInput } from 'rxjs';

@Component({
  selector: 'app-iconography',
  templateUrl: './iconography.component.html'
})
export class IconographyComponent implements OnInit {
  pbiMini$ = this.mockdata.get('pbi-mini-names.json');

  constructor(private mockdata: MockDataService) {}
  ngOnInit() {}
}

, но сейчасМне нужно отсортировать эти данные по одному из ключей объекта, например, "имя"

{
  "name": "Palette",
  "code": "pbi-palette",
  "char": ""
},
{
  "name": "Shopping tag",
  "code": "pbi-shopping-tag",
  "char": ""
},

Я искал и не могу понять.Раньше, когда я получал JSON в виде простого массива, который не является наблюдаемым, я успешно использовал

ngOnInit() {
  this.pbiMini.sort((a, b) => a.name.localeCompare(b.name));
}

Но он не работает с наблюдаемой, как сейчас.Как это сделать?

Обновление

Следуя предложению, я попытался

ngOnInit() {
  this.pbiMiniSorted$ = this.pbiMini$.pipe(
    map(array => {
      return array.sort();
    })
  );
}

, но это не удается скомпилировать с ошибкой: ошибка TS2339: Свойство 'sort' делаетне существует для типа «Объект».

1 Ответ

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

Используйте оператор map для изменения значения в Observable.

const array$ = of([2, 1, 3]);
const modified$ = array$.pipe(
  // map receives a function which receives Array and returns Array
  map(array => {
    // here you can access to the data as Array object
    return array.sort();
  }),
);
...