Sorting data from Angular http get api call

Question

This seems like it should be a really trivial thing, but I'm really struggling to work out a neat non-hacky solution to a simple problem.

my http.get(... Angular call to my service brings back an Observable - which is a stream of T items (after I have mapped with response.json())

The Observable is a property on my component. I have a <select> element in the component template with the <option> elements created via the *ngFor="let item of myObservable | async" code in my template.

This has created a nice select element with all values that I expect showing up nicely in the browser :)

Now someone has asked me to sort the options in the select statement alphabetically.

I dont want to create a sorting pipe, as the Angular team recommend not doing that, and it seems that Observables are by their nature un-sortable.

Ive tried to convert the Observable into a simple array of results - but that seems impossible too.

So how do I achieve this simple thing? my JSON service returns 20 or so JSON objects, and I cant seem to work out how to get them sorted by one of their properties.

Thanks for any help.

@DeanChalk, can you post some codes andd what have you tried so far? — FabioEnne
– FabioEnne, Commented Jun 23, 2017 at 12:02
See if the answer to this question helps: stackoverflow.com/questions/41224749/… — Rob Zuber
– Rob Zuber, Commented Jun 23, 2017 at 12:04

Dean Chalk · Accepted Answer · 2017-06-23 12:40:49Z

7

OK, Ive solved it (if anyone is interested;

My original code from the service was like this:

  public getAllItems(): Rx.Observable<DataItem> {
    var returnVar = this.http.get("http://localhost:8090/api/rest/dataitem")
      .map(res => {
        return res.json()
      });
    return returnVar;

But then I changed the observable to an observable of type array, and sorted it in the map

public getAllItems(): Rx.Observable<DataItem[]> {
    var returnVar = this.http.get("http://localhost:8090/api/rest/dataitem")
      .map(res => {
          var ret = <DataItem[]>res.json();
          ret.sort((a,b) => a.name < b.name ? -1 : 1);
          return ret;
      } );

I didnt realise that you could cast the response object into either a single item or the entire array.

Thanks for everyone who tried to help.

answered Jun 23, 2017 at 12:40

Dean Chalk

20.5k6 gold badges66 silver badges95 bronze badges

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

1 Comment

Winnemucca Over a year ago

Did you happen to write a unit test for the sort method inside your request? I would be interested in seeing it if you still have the code.

Collectives™ on Stack Overflow

Sorting data from Angular http get api call

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related