3

I encountered some strange behaviour whilst testing out a web application I'd written in Internet Explorer 10. After some lengthy debugging, I discovered that, for whatever reason, IE10 doesn't like how I construct my JSON array. Couldn't find anything from trusty Google, all the related stuff was parsing AJAX results, or here on SO.

What I usually do

So I always constructed my JSON arrays just like this answer recommends:

item {};
item.propertyOne = prop1;
item.proprtyTwo = prop2;
...

In this particular case, I'm dynamically building up an array of objects based on some criteria. I have an array which hold all of these objects, so I simply call push() to add each object into the array:

var objects = [];
...
function addToArray(itemName, itemData){
    item = {type: itemName, data: itemData};
    objects.push(item);
}

I then pass this via AJAX to my PHP file, like so:

$.ajax({
    type: 'POST',
    url: 'https://someURL.com',
    data:{data: JSON.stringify(objects)},
    cache: false,
    async: true,
    timeout: 10000,
    success: function (data) {
        location.href='https://someotherURL.com';
    },
    error: function(XMLHttpRequest, textStatus, errorThrown){
        console.log(textStatus + " : " +errorThrown );
    }
});

And then I can do whatever I like with it in my PHP. This causes absolutely no issue in Chrome or Firefox.

The problem

So I realised today that I hadn't done any testing in IE since I implemented this functionality. I open up the webpage in IE and I get hit with the following console error:

error: internal server error

I've seen plenty of these before so I know the issue is originating from the AJAX error callback. After some debugging I narrow the issue down to the function above, in particularly this line:

item = {type: itemName, data: itemData};

In IE, this is evaluating to NULL, so when it gets pushed into the array, the index is NULL and the AJAX fails. Okay, at least I know where my issue is.

After some research, I cannot find anything which indicates why IE cannot parse this. It's perfectly valid syntax; it's working fine in two other browsers. I did, however, solve my problem by changing the syntactical structure to this:

 var objects = [];
 ...
 function addToArray(itemName, itemData){
     objects.push( {type: itemName, data:itemData} );
 }

So, my question is this - Why does this not work in IE10:

item = {type: itemName, data: itemData};
array.push(item);

But this does:

objects.push( {type: itemName, data:itemData} );

EDIT: After trying to reproduce the problem again upon correcting the solution, item does not evaluate to NULL, but rather:

item: 
function item() {
    [native code]
}

I think perhaps the NULL may be originating from another source and the problem is in fact caused by the window.item method in IE as mentioned by @Frederic

Community
  • 1
  • 1
Scott
  • 1,863
  • 2
  • 24
  • 43
  • 3
    It will work. I think you're drawing an incorrect conclusion. That's basic JavaScript functionality. – Pointy Aug 24 '15 at 13:48
  • 2
    @Scott, you *do* have a `var` keyword before `item`, just as you posted here, right? – Frédéric Hamidi Aug 24 '15 at 13:48
  • @FrédéricHamidi I actually don't, that's a typo in the question. Editted to remove it there – Scott Aug 24 '15 at 13:49
  • 5
    @Scott, then your problem is probably related to [Implicit variable in a loop - difference between Internet Explorer and FireFox](http://stackoverflow.com/q/29253542/464709). – Frédéric Hamidi Aug 24 '15 at 13:50
  • @FrédéricHamidi that makes perfect sense. If you want to post an answer I will mark it as accepted – Scott Aug 24 '15 at 13:55
  • @Scott, I actually was about to close your question as a duplicate, but I refrained from doing so because I could not guarantee it was the same problem -- for instance, `item = {type: itemName, data: itemData}` should not evaluated as `null`, but as the `item()` method instead. – Frédéric Hamidi Aug 24 '15 at 13:57
  • 1
    @FrédéricHamidi see my edit. Tried to reproduce the issue again and instead of `null` it's a function call to `window.item`. The `null` must have been cross contaminated from another source. – Scott Aug 24 '15 at 14:03
  • 1
    @FrédéricHamidi: But `JSON.stringify` will omit functions and put `null` in the array instead – Bergi Aug 24 '15 at 14:04

0 Answers0