title: Problems with JavaScript "for in" loop
body: <p>I have an array of objects which will be the basis for a certain menu in my website. It will be build using JavaScript:</p>
  
  <pre><code>[
    {"menuName":"Contact Info","sectionName":"contacts"},
    {"menuName":"Facilities","sectionName":"facilities"},
    {"menuName":"Locations","sectionName":"locations"},
    {"menuName":"Packages","sectionName":"packages"},
    {"menuName":"Policies","sectionName":"policies"},
    {"menuName":"Reviews","sectionName":"reviews"},
    {"menuName":"Rooms","sectionName":"rooms"}
  ]
  </code></pre>
  
  <p>So I decided to use the "for in loop" so that I won't have to deal with indexes and lengths. I expect seven items to appear in the menu when it gets built (I'll be using <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code>).</p>
  
  <p>When I was debugging and accidentally added a background color to the <code>&lt;li&gt;</code>, is when all hell broke loose. I found at least 30 empty <code>&lt;li&gt;</code> after the visible 7th menu <code>&lt;li&gt;</code>.</p>
  
  <p>Why is this happening?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here's the loop. The loop creates another object for another function to parse later on. (It creates an <code>&lt;li&gt;</code> with an <code>&lt;a&gt;</code> inside with properties provided by the previous array.) I know that the other function works fine because when I change this "for-in" loop to an ordinary for loop, or while loop, it works fine.</p>
  
  <pre><code>this.sectionList = function(menu, id) {
      var list = new Array();
  
      for(var i in menu) {
          var listItem = {
              "element" : "li",
              "contains" : [{
                  "element" : "a",
                  "attr" : {
                      "href" : menu[i].sectionName + ':' + id
                  },
                  "contains" : menu[i].menuName
              }]
          }
          list.push(listItem);
      }
  }
  </code></pre>