can't get jquery output my json object

Question

I have the following code in my page. I am expecting a series of json objects to get returned from the person_output.aspx page, which it does successfully. However, when it comes to outputting the content, I receive an error.

  $.getJSON("ajax/person_output.aspx", { 'uID': 1 }, function(data) {
            $.each(data.items, function(i, item) {
            $("<span/>").html(item.first_name).appendTo("#content");
                });
            });

ajax/person_output.aspx produces the following json (this is only for one record..)

{
    "l_id": "49",
    "u_id": "1",
    "first_name": "john",
    "last_name": "doe",
    "title" : "General Manager",
    "color" : "333"
}

firebug produces the following error;

G is undefined
init()()jquery-1....2.min.js (line 12)
(?)()()URLINX5 (line 99)
I()jquery-1....2.min.js (line 19)
F()()jquery-1....2.min.js (line 19)
[Break on this error] (function(){var l=this,g,y=l.jQuery,p=l.....each(function(){o.dequeue(this,E)})}});

Answer 1

There is a comma after the color property in your JSON result, does removing it help?

Answer 2

I'm new to firebug but you need to figure out what is undefined here

$.getJSON("ajax/person_output.aspx", { 'uID': 1 }, function(data) {
            $.each(data.items, function(i, item) {
            $("").html(item.first_name).appendTo("#content");
                });
            });

It is either data, data.items, item, or item.first_name. If you are returning an array, don't you need to do do something like data.items[i], rather than item.first_name? The way you have it setup now, "item" is probably 0,1,2,3...n