Ajax - returned json object is 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?

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)

Hmm. Perhaps try putting data = JSON.parse(data) at the beginning of the success function - ? — rm-vanda
– rm-vanda, Commented Mar 15, 2014 at 18:53
@rm-vanda the dataType is json so that wouldnt be required. However I still tried that and it returns null — M9A
– M9A, Commented Mar 15, 2014 at 18:58
Can you try alert (typeof data) and alert (data.length) and tell us what you've got? — lshettyl
– lshettyl, Commented Mar 15, 2014 at 20:26
@LShetty the typeof is object and the length returns the following: Unable to get property 'length' of undefined or null reference — M9A
– M9A, Commented Mar 15, 2014 at 21:32

Erisu · Accepted Answer · 2014-03-15 20:19:47Z

1

I was not able to reproduce the issue with your sample code. I have tested your code on both Safari and IE 11.

Here is the sample code I used (modified from yours):

PHP Code Sample

<?php
$output = array();
$output[0] = 'Name';
$output[1] = 'Description for Item: ' . $_POST['id'];
$output[2] = 'Price';
echo json_encode($output);
exit();
?>

Since I do not know what $itemname, $itemdescription or $itemprice is, I hard coded in values except for the passed in id.

HTML Code Sample

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="name"></div>
        <div id="desc"></div>
        <div id="price"></div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>
            var $Xhr = $.ajax({
                type: "POST",
                url: "./add.php",
                data: {
                    id: 1
                },
                dataType: "json",
                success: function () {},
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });
            $Xhr.done(function renderData(data){
                document.getElementById("name").innerHTML = data[0];
                document.getElementById("desc").innerHTML = data[1];
                document.getElementById("price").innerHTML = data[2];
            });
        </script>
    </body>
</html>

Notes:
- I use './' in the Ajax URL due to the location of my sample 'add.php' file.
- I used an object for data instead of string. This is how I normally build the data variable.
- An alternative to success, I tried using the $.done and was able to still retrieve data.

Output:

Name
Description for Item: 1
Price

Try using the $.done method and see if this helps you. https://api.jquery.com/deferred.done/

I would also recommend monitoring the network in developer tools to validate the request and response.

edited Mar 15, 2014 at 20:19

answered Mar 15, 2014 at 20:01

Erisu

1414 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

M9A Over a year ago

I get the error that done isnt a function of $Xhr. Also my server response is HTTP/1.1 200 OK when doing my original way

Erisu Over a year ago

What version of jQuery are you using?

M9A Over a year ago

I am using version 1.4.4

Erisu Over a year ago

Alright, that is why done isn't a function of $Xhr. That method was introduced/added in jQuery version 1.5. In the meantime let me downgrade my jQuery version to see if I can now reproduce the issue. You could also upgrade jQuery in the meantime to see if that solves the issue. If that is a possible option for you.

M9A Over a year ago

I will upgrade and see what happens

|

Community · Accepted Answer · 2017-05-23 11:49:46Z

0

source: How to work with jQuery AJAX and PHP array return

This link mentions running eval on the returned data to turn it into an object. So, maybe try:

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

});

Just an idea, sorry I can't test this right now.

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Mar 15, 2014 at 19:22

TylerN

705 bronze badges

2 Comments

M9A Over a year ago

I get the same problem in IE. This code works in Firefox though

TylerN Over a year ago

hm, ok, so another idea is this. I looked at my own ajax code using POST (I saw that you mentioned that might be a problem elsewhere) and the only difference I see is you are passing type before url. When I checked the documentation here: api.jquery.com/jQuery.ajax it looks like url should be sent before settings if you are going to send it. This is the only difference between your AJAX request using POST and mine so it's worth a shot.

Collectives™ on Stack Overflow

Ajax - returned json object is null in ie

2 Answers 2

10 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related