Why does IE[89] convert an array to an object with numeric/string keys?

Question

I have the following JavaScript variable that is injected into a web page by the server.

<script type="text/javascript">
var jsonData = [{"display_mode":...}];
</script>

There is a button on the page that will on demand send this data back via AJAX to have some transformation applied. This works in Chrome, FF, IE10 and IE11.

In IE8 and IE9, this array is being treated differently, when you use the IE8 debugger watch window, you see

When it sends this data to the server it looks like this:

'{"0":{"display_mode":"TREE",...

Notice how the array is now an object with string keys once it leaves the browser, but it is an object with integer keys in the browser, and a real array when it was sent in the source.

It should look like:

'[{"display_mode":"TREE",....

What am I doing to trigger this behavior in this browser? Is there some way to NOT do trigger this behavior?

I'm using extjs4.2.2 to serialize the JSON, just like on IE10, and 11, Chrome and FF. Only on these versions of IE does it change the array into a keyed object for serialization

Right now I'm working on a solution where I will iterate the fake array and build a new valid array to send back to the webserver based upon the version detected by the extjs framework. I don't like adding code like this because version detection is fragile. I prefer this never happen in the first place.

Answer 1

When you look at the original jsonData variable in IE8, it displays like this:

This will luckily also detect as NOT an array with Ext.isArray(). So, knowing the data structure, I can do the following:

var fixed, items, t, i, transaction;

// This fix is here for ie8 and ie9 to turn the arrays back into arrays
if(!Ext.isArray(jsonData)) {
    fixed = [];
    for(t=0; t < jsonData.length; ++t) {
        transaction = jsonData[t];
        items = [];
        for(i=0; i < transaction.items.length; ++i) {
            items.push(transaction.items[i]);
        }
        transaction.items = items;
        fixed.push(transaction);
    }
    jsonData = fixed;
}

And after I do that, the debug displays it as:

Notice that after my correction, the "object" has something called [Methods]. This makes it serialize correctly as a JSON array. What I'm suspecting is happening, but I can't completely prove due to IE's crappy toolset is that they do the conversion from array to object while parsing the script tag. This doesn't cause any operational issues within the browser because these array/objects support length, which allows for loop iteration, Ext.each works, they behave internally like arrays. But the serializer recognizes the difference and send them back the wrong way.

One other data point as to what is going comes from the javascript console

jsonData looks like an object, but behaves like an array, in that I can get a valid value back for jsonData.length (this is before I "correct" the array). And if I create a real object x, and try to get it's length, I get undefined which I would expect. So I'm going to chalk this one up to yet another IE defect. If anyone else hits this problem, at least it will be easier to solve.