title: Loop Through JSON, Insert Key/Value Between Objects?
body: <p><strong>UPDATE</strong> - Thanks for all the great answers and incredibly fast response.  I've learned a great deal from the suggested solutions.  I ultimately chose the answer I did because the outcome was exactly as I asked, and I was able to get it working in my application with minimal effort - including the search function.  This site is an invaluable resource for developers.</p>
  
  <hr>
  
  <p>Probably a simple task, but I can't seem to get this working nor find anything on Google.  I am a Javascript novice and complex JSON confuses the hell out of me.  What I am trying to do is make a PhoneGap Application (Phone Directory) for our company.  I'll try to explain my reasoning and illustrate my attempts below.  </p>
  
  <p>I have JSON data of all of our employees in the following format:</p>
  
  <pre><code>[  
    {  
      "id":"1",
      "firstname":"John",
      "lastname":"Apple",
      "jobtitle":"Engineer"
    },
    {  
      "id":"2",
      "firstname":"Mark",
      "lastname":"Banana",
      "jobtitle":"Artist"
    },
    ... and so on
  ]
  </code></pre>
  
  <p>The mobile framework (Framework 7) that I am using offers a <a href="http://www.idangero.us/framework7/docs/virtual-list.html#.VJl8AcAAA" rel="nofollow">"Virtual List"</a> solution which I need to take advantage of as our directory is fairly large.  The virtual list requires you to know the exact height of each list item, however, you can use a function to set a dynamic height.</p>
  
  <p>What I am trying to do is create "headers" for the alphabetical listing based on their last name.  The JSON data would have to be restructured as such:</p>
  
  <pre><code>[  
    {
      "title":"A"
    },
    {  
      "id":"1",
      "firstname":"John",
      "lastname":"Apple",
      "jobtitle":"Engineer"
    },
    {
      "title":"B"
    },
    {  
      "id":"2",
      "firstname":"Mark",
      "lastname":"Banana",
      "jobtitle":"Artist"
    },
    ... and so on
  ]
  </code></pre>
  
  <p>I've been able to add key/value pairs to existing objects in the data using a for loop:</p>
  
  <pre><code>var letter, newLetter;
  for(var i = 0; i &lt; data.length; i++) {
      newLetter = data[i].lastname.charAt(0);
      if(letter != newLetter) {
          letter = newLetter
          data[i].title = letter;
      }
  }
  </code></pre>
  
  <p>This solution changes the JSON, thus outputting a title bar that is connected to the list item (the virtual list only accepts ONE <code>&lt;li&gt;&lt;/li&gt;</code> so the header bar is a div inside that bar):</p>
  
  <pre><code>{  
    "id":"1",
    "firstname":"John",
    "lastname":"Apple",
    "jobtitle":"Engineer",
    "title":"A"
  },
  {  
    "id":"1",
    "firstname":"Mike",
    "lastname":"Apricot",
    "jobtitle":"Engineer",
    "title":""
  }
  </code></pre>
  
  <p>This solution worked until I tried implementing a search function to the listing.  When I search, it works as expected but looks broken as the header titles ("A", "B", etc...) are connected to the list items that start the particular alphabetical section.  For this reason, I need to be able to separate the titles from the existing elements and use them for the dynamic height / exclude from search results.</p>
  
  <p><strong>The question:</strong>  How can I do a for loop that inserts [prepends] a NEW object (title:letter) at the start of a new letter grouping?  If there is a better way, please enlighten me.  As I mentioned, I am a JS novice and I'd love to become more efficient programming web applications.</p>