title: *ngFor's rendered order is unreliable after an HTTP/JSONP call?
body: <p>I make a JSONP call using information from an array of "keys", which are in a particular order. I want the resulting new array, to be the same order as the source array of keys. This happens sometimes, but not always.</p>
  
  <p>I have tried forEach, for loop, a simple array with just the key values, and an array with the field "name" followed by the key value. No idea why I can't get a consistent order. Following is with a simple array and just key values.</p>
  
  <pre><code> /*separate defining class*/
   export class ArrayObjectItem {
    city: string;
  
  constructor(city: string) {
  
  this.city = city;
   }
  
    }
    /**/
  
    /*Below follows the code inside the main bootstrapped/rendering component*/
  
   names: [] = ['name1', 'name2', 'name3', 'name4', 'name5'];
   arraytorender: Array&lt;ArrayObjectItem&gt;[] = [];
  
  this.names.forEach(name =&gt; {
    this.aJSONPservice.getData(name).subscribe(response =&gt; {
      const objectinarray = new ArrayObjectItem("null");
      objectinarray.city = response.city;
   this.arraytorender.push(objectinarray);
  
   });
   });
  </code></pre>
  
  <p>In the view of the main component:</p>
  
  <pre><code>&lt;div *ngFor="#item of arraytorender"&gt;
   {{item.city}}
  &lt;/div&gt;
  </code></pre>