How to loop through an array of JSON objects using the http client and Observables in Angular

Question

I have the following url https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson and i want to make a http request from a service in Angular.

The data is an Object which has an array of Features. In Features, there are 4 Objects- type, properties, geometry & id. I would like to store the properties and geometry objects in their own array inside my application.

How can I do this?

The code i have in my service.ts is :

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

I know how to call this service from my component but I am not sure how to loop through / access the data I want to save.

Any help would be greatly appreciated.

@KurtHamilton I want to store the data in the component. So i know i need to subscribe in the component. — HiddenSquid
– HiddenSquid, Commented Mar 4, 2020 at 15:23
@Reza im not too sure. I think that's why i'm a little confused. maybe it would be best to store each feature in an array? but if i did that, how could I access feature.properties for example — HiddenSquid
– HiddenSquid, Commented Mar 4, 2020 at 15:25
@HiddenSquid so you want to have geometries: Array<Geometries> and properties: Array<Properties> in your component./service? — Reza
– Reza, Commented Mar 4, 2020 at 15:28

Kurt Hamilton · Accepted Answer · 2020-03-04 15:41:31Z

2

The response of the url you posted looks like this:

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

You are interested in extracting an array of properties and an array of geometry. It makes sense to do this in your service if you want to share this functionality.

To do that, you will need to transform the response in an RxJS map operator in the pipe.

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)
      };
    })
  );
}

Then when you subscribe to this function in your component, you will receive an object that looks like:

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

component.ts

properties: [];
geometries: [];

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

edited Mar 4, 2020 at 15:41

answered Mar 4, 2020 at 15:32

Kurt Hamilton

13.7k1 gold badge28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HiddenSquid Over a year ago

Thank you very much! This is what I was looking for and works as intended. Could you possibly help with another question I have? QUESTION

AliF50 · Accepted Answer · 2020-03-04 15:31:18Z

1

Try:

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);
 });
}

answered Mar 4, 2020 at 15:31

AliF50

19.1k2 gold badges29 silver badges45 bronze badges

Comments

ajp76054 · Accepted Answer · 2020-03-04 17:07:31Z

1

Here is a quick stackblitz I put together on how I would approach this. If you dont want to use a service for storing your data just move the pipe on the http call to your component before the subscribe and change tap to map.

That said I would highly recommend you store the results in the service and use a route resolver to trigger the data get and then you can use the data subscription in your actual component.

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

Something else the service route here preserves the original data should you want to store and use it in other ways as well.

answered Mar 4, 2020 at 17:07

ajp76054

334 bronze badges

Collectives™ on Stack Overflow

How to loop through an array of JSON objects using the http client and Observables in Angular

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related