title: issue with array indexing
body: <p>So I'll jump right to it...<br>
  I am a test automation engineer, and I am making a "keyword driven" testing system that is powered with JSON, which tie in with Selenium tests to run on a web browser.</p>
  
  <p>The "keywords" are stored as XML files, and I have a JavaScript function which loads these keywords into an array, and also stores the Index of that keyword. to paf.keywordIndex</p>
  
  <h3>Example</h3>
  
  <hr>
  
  <pre><code>$.get("getSteps.php", function(keywords) {
              paf.keywords = eval(keywords); // stores into an array...
  
              paf.keywordIndex = -1;
              for ( var i = 0 ; i &lt; paf.keywords.length ; i++ ) {
  
                  // for each path...
                  /* alert(paf.keywords[i]); */
  
                  $.ajax({url: "./_keywords/" + paf.keywords[i], success: function(xml) {         
                      paf.xml = xml;
  
                      paf.keywordIndex++;
                      var title = $(xml).find("keyword").attr("title");
                      //var name = $(xml).find("keyword").attr("name");
  
                      paf.buffer += ("&lt;option value=\"./_keywords/"+paf.keywords[paf.keywordIndex]+"\"&gt;"+title+"&lt;/option&gt;");
                  },
                  async: false
                  //cache: false
                  });
  
              }
  
              $(stepSelectionLocator).html(paf.buffer);
          });
  </code></pre>
  
  <p><code>getSteps.php</code> is a php service that returns all the xml keywords in a json array. e.g.
  <code>["Login.xml","EndSession.xml", "SelectResult.xml", etc...]</code></p>
  
  <hr>
  
  <p>Now this function works, but the only problem is, it's not sorted in ANY way. So the output would be -</p>
  
  <ul>
  <li>Login           (Login.xml)</li>
  <li>Select a result (SelectResult.xml)</li>
  <li>End a session   (EndSession.xml)</li>
  </ul>
  
  <hr>
  
  <p>To solve this issue, I added an extra attribute to my <code>&lt;keyword&gt;</code> so now it's <code>&lt;keyword area="basic"&gt;</code> to indicate that this is a basic step. and now my function is -</p>
  
  <pre><code>$.get("getSteps.php", function(keywords) {
              paf.keywords = eval(keywords); // stores into an array...
  
              paf.keywordIndex = -1;
              for ( var i = 0 ; i &lt; paf.keywords.length ; i++ ) {
  
                  // for each path...
                  /* alert(paf.keywords[i]); */
  
  
  
                  $.ajax({url: "./_keywords/" + paf.keywords[i], success: function(xml) {         
                      paf.xml = xml;
  
                      paf.keywordIndex++;
                      var title = $(xml).find("keyword").attr("title");
                      var area = $(xml).find("keyword").attr("area");
                      //var name = $(xml).find("keyword").attr("name");
  
                      paf.buffer.push(area.toUpperCase() + ": " + title);
                  },
                  async: false
                  //cache: false
                  });
  
              }
  
              paf.buffer.sort(); // array is sorted...
  
  
  
              paf.buffer2 = "";
              paf.keywordIndex = -1;
              for ( var a in paf.buffer ) {
                  paf.keywordIndex++;
                  paf.buffer2 += "&lt;option value=\"./_keywords/"+paf.keywords[paf.keywordIndex]+"\"&gt;"+ paf.buffer[a] + "&lt;/option&gt;"; 
              }
  
              $(stepSelectionLocator).html(paf.buffer2.toString().replace(",", ""));
          });
  </code></pre>
  
  <p>Now the output is</p>
  
  <ul>
  <li>BASIC: End the session (Login.xml)</li>
  <li>BASIC: Login (SelectResult.xml)</li>
  <li>RESULTS: Select a result (EndSession.xml)</li>
  </ul>
  
  <p><br></p>
  
  <p>So I've already determined that the index is the issue. However, I cannot figure out a way to fix this..</p>
  
  <p>I am open to alternatives, so if you find a simpler way to index this, please let me know!</p>