Nested JSON in IE6 causes problems.

Question

I'm making a request to a JSON page using jQuery's $.getJSON method, and from the returned JSON i'm creating some HTML and putting it on to the page.

The problems appears when I have a nested JSON object, i'll show you an example later.

First off, if I make a request to my JSON page and return the following JSON, the function works just fine and i see a beautiful HTML element appear on the page:

JSON:

({
     "variants": [
         {
             "variantId": "536",
             "title": "Party Like a Rock Star for Two at the Metropolitan hotel, London ",
             "price": "£299.00"         
         }
     ]
})

This works fine, no errors.

However, as soon as i return the JSON below, the function does not work.

({
     "variants": [
         {
             "variantId": "536",
             "title": "Party Like a Rock Star for Two at the Metropolitan hotel, London ",
             "price": "£299.00",
             "blogs": [
                 {
                     "title": "Another test",
                     "author": "Sean",
                 },
                 {
                     "title": "This is a test",
                     "author": "Sean",
                 }
             ]
         }
     ]
})

As you can see, there are no characters in it that would cause it too break. I've also tried renaming the fields, just by chance that "blogs", "title", or "author" were reserved words in JS (as i thought, no difference!)

To make sure it was not my way of processing the data that was causing a problem, i stuck an alert('Got here.'); as the first piece of code (see below) in my $.getJSON function, and that doesn't fire so I know it's not what i'm doing with the data that is causing an error.

$.getJSON('/ajax/cover_flow_detail.ashx?experienceId=' + arguments[0], function(d) {
        alert('Got here'); // doesn't fire ?

        // omitted for brevity.

}

Even weirder - this is only happening in IE6. IE7 & FF are fine.

Any push in the right direction would be appreciated, i'm completely stumped!

Cheers, Sean

Answer 1

You have an error in your JSON — trailing commas in some of your object definitions.

(This suggests you are generating your JSON using a template instead of a JSON library, this is a mistake.)

IE is less forgiving of that error than other browsers.

Answer 2

Internet Explorer is notorious for breaking on trailing commas.

var obj = {
     upper: 1,
     stage: 2,
};

Fails on IE, while other browsers ignore the trailing comma after the second element.

Answer 3

Ironically, it should be erroring. IE did it right. Browsers shouldn't loosely parse JSON if the syntax isn't right. The , should be treated like a ; then.

I believe it is the parser, because in EXT JS, it is strict.

Remember when HTML tags that were poorly closed would be ignored by IE, and not Netscape. Interesting in the turn around.