dynamically building an array from DOM elements

dynamically building an array from DOM elements

There's no way this should be as hard as I am finding it.

I want to dynamically build an array like this:

  1. var myPlayList = [
  2.         {name:"Title1",mp3:"path/to/title1.mp3"},
  3.         {name:"Title2",mp3:"path/to/title2.mp3"},
  4.         {name:"Title3",mp3:"path/to/title2.mp3"},
  5.     ];
but I want to be able to pull the data from an unordered list in the DOM that looks like this:

  1. <ul id="tracklisting">
  2.     <li><a href="path/to/title1.mp3">Title1</a></li>
  3.     <li><a href="path/to/title2.mp3">Title2</a></li>
  4.     <li><a href="path/to/title3.mp3">Title3</a></li>
  5. </ul>

Should be simple enough, right?  But I've done very little dynamic building of arrays before, and I can't seem to make it work.  After lots of web searches and reading up on Arrays, I am stumped.

I tried a lot of things... they all start with:
  1. var myPlayList = [];
 
And then I continue; each of these seemed logical (and yes, I tried numerous other variations)... still no luck.

  1. $('ul#tracklisting li a').each(function(){
  2.      myPlayList.push('{name:"'+$(this).text()+'",mp3:"'+$(this).attr("href")+'"}');
  3. });
with this one (above), each item came back 'undefined', even though I could log both $(this).text() and $(this).attr("href") and see the expected result in the console.

  1.  $('ul#tracklisting li a').each(function(i){
  2.       myPlayList[i][name].push($(this).text());
  3.       myPlayList[i][mp3].push($(this).attr("href"));
  4.  });
with this one (above), I got a javascript error in Firebug console, saying that myPlayList[i] was undefined.

Obviously, there is some fundamental way of doing this that is escaping me.  Who can point me in the right direction?

Thanks in advance.