Как l oop через массив JSON объектов, используя клиент http и Observables в Angular

Question

У меня следующий URL https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson, и я хочу сделать http-запрос от службы в Angular.

Данные - это объект, имеющий массив функций , В разделе Особенности есть 4 объекта: тип, свойства, геометрия и идентификатор. Я хотел бы хранить свойства и geometry объекты в их собственном массиве внутри моего приложения.

Как я могу это сделать?

Код, который у меня есть в моем service.ts :

 public getEarthquakeData(): Observable<any[]> {
    return this.httpClient.get<any[]>(this.url);
  }

Я знаю, как это вызвать сервис из моего компонента, но я не уверен, как l oop через / получить доступ к данным, которые я хочу сохранить.

Любая помощь будет принята с благодарностью.

Answer 1

Ответ размещенного вами URL выглядит следующим образом:

{
  "type": "",
  "metadata": [],
  "features": [
    {
      "type": "",
      "properties": {},
      "geometry": {},
      "id": ""
    }
  ],
  "bbox": []
}

Вы заинтересованы в извлечении массива properties и массива geometry. Имеет смысл сделать это в вашем сервисе, если вы хотите поделиться этой функциональностью.

Для этого вам потребуется преобразовать ответ в оператор Rx JS map в конвейере.

public getEarthquakeData(): Observable<{ properties: [], geometries: []}> {
  return this.httpClient.get<any>(this.url).pipe(
    // this will run when the response comes back
    map((response: any) => {
      return {
        properties: response.features.map(x => x.properties),
        geometries: response.features.map(x => x.geometry)
      };
    })
  );
}

Затем, когда вы подпишетесь на эту функцию в своем компоненте, вы получите объект, который выглядит следующим образом:

{
  "properties": [],
  "geometries": []
}

component.ts

properties: [];
geometries: [];

ngOnInit() {
  this.earthquakeService.getEarthquakeData().subscribe(data => {    
   this.properties = data.properties;
   this.geometries = data.geometries;
 });
}

Answer 2

Вот быстрый стекблитц, который я собрал, о том, как бы я подошел к этому. Если вы не хотите использовать службу для хранения ваших данных, просто переместите канал при вызове http на ваш компонент перед подпиской и измените касание на карту.

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

https://stackblitz.com/edit/angular-ccqrju

Что-то еще, маршрут обслуживания здесь сохраняются исходные данные, если вы хотите сохранить их и использовать и другими способами.

Answer 3

Попробуйте:

import { map } from 'rxjs/operators';
.......
properties: Array<any>;
geometries: Array<any>;

ngOnInit() {
  this.earthquakeService.getEarthquakeData().pipe(
    // pluck the features array from the object
    map(data => data.features),
  ).subscribe(features => {
   // this will give you the array of objects you would like
   this.properties = features.map(feature => feature.properties);
   this.geometries = features.map(feature => feature.geometry);
 });
}