Question

A bit of a mystery has cropped up using knockout (2.1.0) and knockout mapping (2.1.2) in IE9. For some reason, array indices of objects get turned into parent objects. For example:

ko.mapping.toJSON(attachments);

produces something that looks like this in Chrome:

{
    "UserID": 432,
    "Attachments": [{
        "AttachmentID": 2,
        "OwnerID": 321,
        "DisplayName": "sample.pdf",
        "Description": "desc",
        "PostDate": "2012-06-01T09:24:43.817"
        }, {
        "AttachmentID": 3,
        "OwnerID": 432,
        "DisplayName": "sample3.pdf",
        "Description": "desc",
        "PostDate": "2012-06-05T14:01:00.693"
        }, {
        "AttachmentID": 4,
        "OwnerID": 543,
        "DisplayName": "sample2.pdf",
        "Description": "desc",
        "PostDate": "2012-06-05T14:01:49.18"
        }]
}

… but in IE9, produces something like this:

{
    "UserID": 432,
    "Attachments": {
    "0": {
        "AttachmentID": 2,
        "OwnerID": 321,
        "DisplayName": "sample.pdf",
        "Description": "desc",
        "PostDate": "2012-06-01T09:24:43.817"
    },
    "1": {
        "AttachmentID": 3,
        "OwnerID": 432,
        "DisplayName": "sample3.pdf",
        "Description": "desc",
        "PostDate": "2012-06-05T14:01:00.693"
    },
    "2": {
        "AttachmentID": 4,
        "OwnerID": 543,
        "DisplayName": "sample2.pdf",
        "Description": "desc",
        "PostDate": "2012-06-05T14:01:49.18"
    }
    }
}

This breaks my knockout bindings because the template is expecting attachments to be a first-order array.

Interestingly, json2’s stringify returns the first output (which is what I’d expect) in every browser I’ve tried.

Has anyone seen this behavior before? Any ideas on how to correct it?

Answer 1

The short version is that I didn’t find an answer to the problem, but I did find a workaround. It isn’t pretty. If i override the JSON object and force it to use JSON3 using delete window.JSON;, then do some stringify hocus pocus like this:

var jsonString = JSON.stringify(objToBind);
var reconstitutedObject = ko.utils.parseJson(jsonString);

… create the mapping from the reconstituted object and bind to the reconstituted object, the extra container seems to be gone. This suggests to me that there is something extra in the array definition that is being interpreted as a container, but after poking around in the guts of the main project, sniffing network traffic, and trying to drill down into how the server responds, I’m coming up short.