CODEWITHSUNDEEP
javascriptjqueryajaxgetjson
idbentley
idbentley

Reputation: 4218

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

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.

Upvotes: 1

Views: 3606

Answers (3)

davansy
davansy

Reputation: 11

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).

Upvotes: 1

idbentley
idbentley

Reputation: 4218

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.

Upvotes: 0

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13302

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); 
}

Upvotes: 1

Related Questions