Function doesn't display data from JSON

Question

In my webapp I have a page where I use getJSON to get data from server. Firebug shows that it get's JSON from server just the way it is supposed to, but no data is shown. What could be the problem? Here is what my code looks like:

 $('#detailsPage').live('pageshow', function(event) {
    var id = getUrlVars()["id"];
    $.getJSON(serviceURL + 'getemployee.php?id='+id+'&callback=?', displayEmployee);
});

function displayEmployee(data) {
    var employee = data.item;
    $('#employeePic').attr('src', 'pics/' + employee.PIC);
    $('#fullName').text(employee.NAME);
    $('#employeeTitle').text(employee.TITLE);
    $('#lisatieto').text(employee.INFO);


    if (employee.puhelin_nro) {
        $('#actionList').append('<li><a href="tel:' + employee.puhelin_nro + '"><h3>Soita puhelimeen</h3></a></li>');
        $('#actionList').append('<li><a href="sms:' + employee.puhelin_nro + '"><h3>SMS</h3></a></li>');
    }
    $('#actionList').listview('refresh');

}

Console shows

employee is undefined
[Break On This Error]   

$('#employeePic').attr('src', 'pics/' + employee.PIC);

This is the JSON response:

jQuery164008509381752724021_1336981793995({
    "key": [
        {
            "PIC": "Tuntematon",
            "NAME": "0",
            "TITLE": "0",
            "INFO": "0"
        }
    ]
})

Answer 1

You need to use this

var employee = data.key[0];