Correct way to process arrays returned from HTTPClient request - use observable operators or array operators?

0
votes

I'm gradually learning about observables and the power they weild. However as I learn more about them I wonder whether my old-school array methods are now redundant.

The HTTPClient returns an observable which I subscribe to. However the data returned from the server contains a list of items (pieces of equipment in this case). My instinct would be to us an old school for loop to unrwap the data and process it into the application. However I have a sense that that might not be the right approach in the world of observables.

Should I still be using for loops or switching to RxJS operators?

Here's the service:

# equipment.service.ts

export class EquipmentService {

  public equipmentList:Array = [];

  constructor(private http: HttpClient) {
  }

  public loadEquipment(){

    this.http.get('https://ourapi.com/equipment/')
      .subscribe(response => { 

        // Is this the right approach in an RXJS world?
        for(let record of response.data){
          equipmentList.push ({
            id: record.id,
            equipment_required: record.equipment_required,
            quote: record.quote,
            created_time: record.created_time,
          })
        }
        
      });
  }
}

Here's the data that the server returns:

{
    "data": [
        {
            "id": "recNl4mf81TxaQstV",
            "equipment_required": "Speakers + amp + dj equipment for music ",
            "quote": 110,
            "created_time": "2018-05-13T15:57:14.000Z"
        },
        {
            "id": "recOzzRpZ0pS4GQYs",
            "equipment_required": "Radio Mike",
            "quote": 400,
            "created_time": "2018-05-13T15:57:14.000Z"
        },
        {
            "id": "recXhWqLKsdz3QE6t",
            "equipment_required": "Fairy lights to cover area",
            "quote": 400,
            "created_time": "2018-05-13T15:59:06.000Z"
        }
    ]
}

The section of code I'm interested in is that which processes the server response, method that handles the subscribe request. I'm using for(let record of response.data) but this feels like I should be able to split the data using an observable operator and then operate on each record.

Is that correct? Is there an observable method that will split this single observable event into a stream of individual EquipmentRecord events that I could then process one by one? Is that the right way to think about things?

1
angularrxjsobservable
This feels aside the point of your question, but usually you don't want to subscribe inside the service. What you want to do is return an observable that your components can use. - ShamPooSham
@ShamPooSham that make sense, point taken - Peter Nixey

1 Answers

2
votes

Not use for loop anymore. You can do this:

import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import {HttpClient} from '@angular/common/http';

...

  getEquipmentList(): Observable<any[]> {
    console.log('getEquipmentList');
    return this._http.get<any>('https://ourapi.com/equipment/').pipe(
      map(response => response.data.map(data=> ({
            id: data.id,
            equipment_required: data.equipment_required,
            quote: data.quote,
            created_time: data.created_time,
        })))
    );

If you add a test stackblitz we can also try it on the spot. There is no correspondence between the data that you return from the server and the data that you try to recover with the service (for example: record.attributes.name).

EDIT: Fix for array mapping.

EDIT2: This is a working example (without your api but another for mock): https://stackblitz.com/edit/angular-http-client-observers-example?file=src%2Fapp%2Fequipment.service.ts