title: Angular 2 Observable returning array out of order
body: <p>I have an Angular 2 project with a method that subscribes to an observable. The observable gets a sorted list of objects from the server and returns it for viewing on the page. However, the array is losing it's order for some reason.</p>
  
  <p>Here is the snippet from the service that is sending the request to the server:</p>
  
  <p>template.service.ts</p>
  
  <pre><code>export class TemplateService {
  
    constructor(private http: Http) { }
  
    getTemplates(): Observable&lt;any&gt; {
        let url = `controller/GetTemplateList`
        return this.http.get(url)
            .map(this.extractData)
            .catch(this.handleError);
    }
  
    private handleError(error: any) {
      let errMsg = (error.message) ? error.message :
          error.status ? `${error.statusText}` : 'Server error';
      console.error(errMsg);
      return Observable.throw(errMsg);
    }
  
    private extractData(res: Response) {
        let body = res.json();
        return body;
    }
  }
  </code></pre>
  
  <p>And here is the component that is subscribing to the observable:</p>
  
  <p>templates.component.ts</p>
  
  <pre><code>export class TemplatesComponent implements OnInit {
  
    constructor(private templateService: TemplateService) { }
  
    ngOnInit() {
  
      this.templateService.getTemplates().subscribe(res =&gt; {
          console.log(res)     
      }, err =&gt; {
          console.error(err);
      });
    }
  }
  </code></pre>
  
  <p>The server is returning:</p>
  
  <pre><code>{"success":true,"list":["A","B","C","D","E","F","G","H","I","J","K","L"]}
  </code></pre>
  
  <p>But when I do that console.log on the subscription, it looks like this:</p>
  
  <pre><code>list:(12) ["G", "A", "C", "D", "E", "F", "B", "H", "I", "J", "K", "L"]
  success:true
  </code></pre>
  
  <p>It works properly when I tried an array of 3 elements, but with that full list it returned out of order. Why would it be scrambling the order of the array on the subscribe?</p>
  
  <p>Also, if I remove the two lines from the getTemplates() method so it looks like this:</p>
  
  <pre><code>getTemplates(): Observable&lt;any&gt; {
    let url = `controller/GetTemplateList`
    return this.http.get(url);
  }
  </code></pre>
  
  <p>it returns in the correct order like so:</p>
  
  <pre><code>_body:
    "{"success":true,
    "list: ["A","B","C","D","E","F","G","H","I","J","K","L"]}"
  </code></pre>