title: Order of js object keys and values
body: <p>I know that javascript objects have no inherent order for the key/value pairs it contains, but I have run into an interesting problem, and hopefully, someone can point me to a solution.</p>
  
  <p>I'm developing an angular app that needs to iterate through an array of objects and display the value for a given key in the UI. This is tabular data. Pretty basic. The problem comes from the backend data sources. The data is aggregated from multiple sources, and not all objects get all key/values. We have no control over the backend. Furthermore, there are a variable number of key/value pairs. So, what I get on the frontend may look look like this:</p>
  
  <pre><code>[{ A: a, B: b, C: c}, {B: b, C: c}]
  </code></pre>
  
  <p>I can iterate the returned array and add missing keys, but things may be out of order, i.e.:</p>
  
  <pre><code>[{ A: a, B: b, C:c}, {B: b, C: c, A: a}]
  </code></pre>
  
  <p>which, course leads to an incorrect display of data. </p>
  
  <pre><code>for(var val of dataArray){
          for(var header of headers){
              val.environmentMetrics[header] = val.environmentMetrics[header] || 0;
          }
      }
  </code></pre>
  
  <p>headers is an array of strings that match the keys. The first object in the returned data contains the keys, which are used for the table headers.</p>
  
  <p>So whats the best way to get my data order consistently?
  Thanks</p>