Javascript/PHP JSON Array null in IE

Question

Hi I have a javascript code that connects to a php script via ajax. This php script returns an array. In the success function of the ajax call, I use the returned array to display information to the user. This all works fine in all the browsers I have tried except Internet Explorer. I get the following error:

Unable to get property '0' of undefined or null reference

'0' is the index of the first element in the array. Here is the code:

JS

$.ajax({
    type: "POST",
    url: "/add.php",
    data: 'id=' + itemid,
    dataType: "json",
    success: function (data) {
        document.getElementById("name").innerHTML = data[0];
        document.getElementById("desc").innerHTML = data[1];
        document.getElementById("price").innerHTML = data[2];
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
    }
});

PHP

$output = array();
$output[0] = $itemname;
$output[1] = $itemdescription;
$output[2] = $itemprice;
echo json_encode($output);
exit();

I tried console.log(data) in the success function and in Internet Explorer it returns null whereas other browsers it returns the array. Does anyone know what is wrong here?

EDIT: The error code on the console in IE is SCRIPT5007. Upon searching this, this means:

You attempted to invoke the Object.prototype.toString or Object.prototype.valueOf method on an object of a type other than Object. The object of this type of invocation must be of type Object.

Link: http://msdn.microsoft.com/query/dev12.query?appId=Dev12IDEF1&l=EN-GB&k=k(VS.WebClient.Help.SCRIPT5007)

Answer 1

try :

$output = array();
$output[] = $itemname;
$output[] = $itemdescription;
$output[] = $itemprice;
echo json_encode($output);
exit();

Note that $output[]=xxx means : append xxx to $output where $output[1]=xxx means, put xxx at index 1 of $output.

Note that you may as well do :

$output = array($itemname, $itemdescription, $itemprice);

EDIT for comments and multiples OP edits :

Try printing the data to see what's going on :

success: function (data) {
    console.log(data);
    document.getElementById("name").innerHTML = data[0];
    document.getElementById("desc").innerHTML = data[1];
    document.getElementById("price").innerHTML = data[2];
},

You'll see what data contains, for IE, in the console (use F12)

Answer 2

Not quite sure why, try to warp it as a kv object?

$output = array(
    'item' => array (
        $itemname, $itemdescription, $itemprice
    )
);
echo json_encode($output);
exit();