Quick Javascript and JSON question

Hi Everyone -
I just starting playing with javascript / jQuery over the last we days, after discovering jQuery Spy - http://leftlogic.com/lounge/articles/jquery_spy2/ . Very fun stuff!

I can't figure out one thing though: I have a PHP script which generates JSON output like the following:

"records": [ { 'string': 'Test Content', 'num': '1' }, { 'string': 'Test Content', 'num':'2' } ]

In other words, the script spits out an object within an object. I can't seem to get that JSON output to work with Jquery Spy though - it doesn't seem to want to play nicely with objects embedded within objects. What am I doing wrong? See code below -

Thanks!

$(function() {
  $('#spyContainer').spy({
    'ajax': '/jquery_spy/out_json.php',
    'push': custom_push });
});

function custom_push(response) {
  eval("var json = " + response); // convert to JSON

  // I'm being lazy here, but you get the idea:
  // Build the HTML
  var html = '<div style="display:none">'
  html += '<span class="ctr">' + json.records.num;
  html += '</span><span class="content">';
  html += json.records.string + '</span></div>';
  // Prepend the HTML inside the container
  $('#' + this.id).prepend(html);
} 

Code (markup):

 

Why do you have "records": in the beginning?

 

That's the way the JSON file is generated; I can't control the JSON file.

 

The script needs to see the json in a specific formatting, its will throw an error otherwise.

If you can't control it just import it then modify it.

 

er, if you can't control the PHP script, then do this:
var responseArray = eval(response.replace(/"records":/,""));

now responseArray can be iterated in a loop and all child elements will be objects with the properties you need...
not sure on jquery, in mootools you'd do:

var responseArray = eval(response.replace(/"records":/,""));
responseArray.each(function(ob) {
    // write to dom direct ...
    new Element("div", {
        html: ob.string,
        styles: {
             ...
        }
    }).inject($(ob.id));
    ... etc etc. or make a html block like you do
});

Code (markup):