jQuery ajax method with dataType 'json' incorrectly parsing json data

Question

I'm having some inexplicable behaviour using jQuery 1.4.2, and I'm beginning to think that it might be a safari problem, not a jQuery one. Let me explain.

I began simply enough by using .getJSON like this:

$.getJSON("/challenge/results", form_data, function(data){
  //I know console.log is bad news, just a simplification.
  console.log('data', data); 
}

And the log gave me something along the lines of

>locations: Array (1)

While I was expecting an array of size 2. So I had a look at the json in the response:

{"locations":
[{"customer_id":2,"editable":true,"id":971,"latitude":43.659208,"longitude":-79.407501,"max_zoom":25,"min_zoom":9,"name":"test"},
{"customer_id":3,"editable":true,"id":974,"latitude":36.746944,"longitude":-107.970899,"max_zoom":25,"min_zoom":9,"name":"test2"}]}

I've simplified this considerably for the sake of clarity, but as far as I can tell, the json received is perfectly valid (generated programmatically through rails). [Update: JSONLint confirms this hypothesis.]

I was surprised by this, so I converted my request to a $.ajax request to see if there was some subtle difference between them (since then, looking in the source of jQuery I see that $.getJSON simply calls $.ajax).

    $.ajax({
        url:"/challenge/results",
        dataType: 'json',
        data: form_data,
        cache:false,
        success: function(data, textStatus){
            console.log("data!", data, textStatus);
        });

But alas! The same response:

locations: Array (1) success

At this point, I must admit - I was getting a bit silly, so I thought I would try something completely bound to fail:

    $.ajax({
        url:"/challenge/results",
        dataType: 'text',
        data: form_data,
        cache:false,
        success: function(data, textStatus){
            console.log("Parsed:!", $.parseJSON(data), textStatus);
        });

Much to my surprise my console read:

locations: Array (2) success

I was stumped. At this point I dug in my heels and took a long hard look at the jQuery source (1.4.2). I suppose unsurprisingly, the ajax function seems not to handle the json parsing itself (although, I must admit, I can't be sure).

I'm totally at a loss for why this could be happening - any help is appreciated.

what's the JSON look like when it comes back as text? Formatted the same? — David Hoerster
– David Hoerster, Commented Feb 18, 2011 at 21:10
Yes, it looks exactly as it does when I view the response in the webkit inspector. — idbentley
– idbentley, Commented Feb 18, 2011 at 21:11
jQuery 1.4.2 parses json the same way you do in your second example: data = jQuery.parseJSON( data ); - it happens in the httpData function. Try to do console.log(JSON.stringify(data)); in your first example and see if what it outputs - if it doesn't look like what you send, then you probably have malformated json — Martin Jespersen
– Martin Jespersen, Commented Feb 18, 2011 at 21:14
You said it may be a safari problem. Do you get the correct results (Array(2)) from a different browser? — David Hoerster
– David Hoerster, Commented Feb 18, 2011 at 21:14
The plot thickens. Thanks Martin, that gave me a start. Instead of your suggestion, I just loaded up a patched version of jquery source, and logged the pre-parse data, the post-parse data, and then the stringified version of the post-parse'd data. The first two are unsurprising (yeilding what I've seen above), but the stringify brought back the original 2 element array! It's fair to say I'm mistified. Finally, I tried copying the output (pre-parse) json, and using parseJSON in the console on it - 2 elements. Same with stringified json. Why would the same function have different behaviour? — idbentley
– idbentley, Commented Feb 18, 2011 at 21:37

Richard Marskell - Drackir · Accepted Answer · 2011-02-18 21:34:03Z

1

Perhaps I missed something, but I notice that your JSON is an object that has a single property ("locations") with an array as it's value. Have you tried:

$.getJSON("/challenge/results", form_data, function(data){
  //I know console.log is bad news, just a simplification.
  console.log('data', data.locations); 
}

answered Feb 18, 2011 at 21:34

Richard Marskell - Drackir

13.4k3 gold badges37 silver badges55 bronze badges

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

4 Comments

idbentley Over a year ago

That was just a snippit of the object. Thanks though!

Richard Marskell - Drackir Over a year ago

@idbentley: Ah, sorry, I did misread. Can you post an example link?

Richard Marskell - Drackir Over a year ago

@idbentley: What do you mean by snippit of the object by the way? Did it not show the two array elements?

idbentley Over a year ago

I'm not sure I understand. The full Object was something like {locations: Array(1), ....}. The object has more than just locations in it, but that seems to be fine - I'm having the weird behaviour on the locations array. When I inspect the array using the webkit inspector, it shows 1 location element (specifically, id=971) and omits the other. I can post an example, but it will probably have to wait till next tuesday. Thanks again

daniula · Accepted Answer · 2014-07-31 21:45:37Z

try this:

 // Enables for all serialization
jQuery.ajaxSettings.traditional = true;

// Enables for a single serialization
jQuery.param( stuff, true );

// Enables for a single Ajax requeset
$.ajax({ data: stuff, traditional: true });

hey,your problem seems like to be have something to do with the nested param serialization.just as what the jQuery 1.4 release note say:

Query 1.4 adds support for nested param serialization in jQuery.param, using the approach popularized by PHP, and supported by Ruby on Rails. For instance, {foo: ["bar", "baz"]} will be serialized as “foo[]=bar&foo[]=baz”.

In jQuery 1.3, {foo: ["bar", "baz"]} was serialized as “foo=bar&foo=baz”. However, there was no way to encode a single-element Array using this approach. If you need the old behavior, you can turn it back on by setting the traditional Ajax setting (globally via jQuery.ajaxSettings.traditional or on a case-by-case basis via the traditional flag).

idbentley · Accepted Answer · 2011-03-14 17:37:42Z

0

The Webkit inspector's debugger should be used instead of console logging, which can show the object in a future state. This was the cause of this problem as the list was being trimmed in code after the console.log line, which resulted in the unexpected behaviour.

answered Mar 14, 2011 at 17:37

idbentley

4,2183 gold badges37 silver badges50 bronze badges

Collectives™ on Stack Overflow

jQuery ajax method with dataType 'json' incorrectly parsing json data

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related