title: Angular 6 sort JSON from observable by key
body: <p><em>Note: I know how to sort a regular array of objects using <code>.sort()</code>, but this time I am stuck with an observable and I am not familiar with it.</em></p>
  
  <p>I am fetching a JSON array of objects with a service:</p>
  
  <pre><code>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}`);
    }
  
  }
  </code></pre>
  
  <p>With this service, we can just pass a filename of a json file and get an observable:</p>
  
  <pre><code>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() {}
  }
  </code></pre>
  
  <p>but now I need to <em>sort</em> this data by one of the object keys, e.g. "name"</p>
  
  <pre><code>{
    "name": "Palette",
    "code": "pbi-palette",
    "char": "&amp;#xe937;"
  },
  {
    "name": "Shopping tag",
    "code": "pbi-shopping-tag",
    "char": "&amp;#xe938;"
  },
  </code></pre>
  
  <p>I have searched and I can't figure it out.  In the past, when getting JSON as a plain array that's not an observable, I have successfully used</p>
  
  <pre><code>ngOnInit() {
    this.pbiMini.sort((a, b) =&gt; a.name.localeCompare(b.name));
  }
  </code></pre>
  
  <p>But it does not work on an observable like I have now.  How is this done?</p>
  
  <h2>Update</h2>
  
  <p>Following a suggestion, I tried</p>
  
  <pre><code>ngOnInit() {
    this.pbiMiniSorted$ = this.pbiMini$.pipe(
      map(array =&gt; {
        return array.sort();
      })
    );
  }
  </code></pre>
  
  <p>but this fails to compile with the error:
      error TS2339: Property 'sort' does not exist on type 'Object'.</p>