title: js "for in" not appending key/values in a specific order
body: <p>Given the following literal:</p>
  
  <pre><code>"rating":{
  "overall": 89,
  "atmosphere": 82,
  "cleanliness": 91,
  "facilities": 86,
  "staff": 94,
  "security": 91,
  "location": 91,
  "valueForMoney": 90
  },
  </code></pre>
  
  <p>And the following <code>for/in</code> loop:</p>
  
  <pre><code>for (key in data.rating) {
    if ( key != "overall" ){
      //&lt;div class='ratingbar'&gt;&lt;p&gt;" + translateRating(language, key) + "&lt;span class='right bold'&gt;" +  data.rating[key]/10 + "&lt;/span&gt;&lt;/p&gt;&lt;div class='bar-wrapper'&gt;&lt;div class='bar' style='width:" + data.rating[key] + "%'&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
      //current.find('.ratings ul').append("&lt;li class='left'&gt;&lt;span class='ratinglabel'&gt;" + translateRating(language, key) + "&lt;/span&gt;&lt;span class='ratingpercent bold'&gt;" + data.rating[key]/10 + "&lt;/span&gt;&lt;div class='ratingbackground rounded'&gt;&lt;span style='width:" + data.rating[key] + "%'&gt;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;");
      if ( key == "valueForMoney" ){
        current.find('.ratings ul').append("&lt;li class='left'&gt;&lt;span class='ratinglabel'&gt;" + translateRating(language, 'valueForMoney') + "&lt;/span&gt;&lt;span class='ratingpercent bold'&gt;" + data.rating[key]/10 + "&lt;/span&gt;&lt;div class='ratingbackground rounded'&gt;&lt;span style='width:" + data.rating[key] + "%'&gt;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;");
      }
      if ( key == "security" ){
        current.find('.ratings ul').append("&lt;li class='left'&gt;&lt;span class='ratinglabel'&gt;" + translateRating(language, 'security') + "&lt;/span&gt;&lt;span class='ratingpercent bold'&gt;" + data.rating[key]/10 + "&lt;/span&gt;&lt;div class='ratingbackground rounded'&gt;&lt;span style='width:" + data.rating[key] + "%'&gt;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;");
      } 
      if ( key == "location" ){
        current.find('.ratings ul').append("&lt;li class='left'&gt;&lt;span class='ratinglabel'&gt;" + translateRating(language, 'location') + "&lt;/span&gt;&lt;span class='ratingpercent bold'&gt;" + data.rating[key]/10 + "&lt;/span&gt;&lt;div class='ratingbackground rounded'&gt;&lt;span style='width:" + data.rating[key] + "%'&gt;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;");
      }                           
  
    }
  } 
  </code></pre>
  
  <p>When I print the values of the object, I'm expecting them to print in a specific order—the same order as my if statements. Instead, "valueForMoney" is always last. The order I'm expecting is:</p>
  
  <ol>
  <li>Value For Money </li>
  <li>Security </li>
  <li>Location </li>
  <li>Staff </li>
  <li>Atmosphere </li>
  <li>Cleanliness </li>
  <li>Facilities </li>
  </ol>