CODEWITHSUNDEEP
javascriptjqueryruby-on-railsajaxjson
guilb
guilb

Reputation: 123

Getting only the JSON from an ajax query

I'm using this script : 

var test = $.ajax({ url : ("/areas/list"), type : 'GET', dataType : 'json', success : function(e) {

    } });

I get this result in var text :

    Object {readyState: 1, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
abort: function ( statusText ) {
always: function () {
complete: function () {
done: function () {
error: function () {
fail: function () {
getAllResponseHeaders: function () {
getResponseHeader: function ( key ) {
overrideMimeType: function ( type ) {
pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
progress: function () {
promise: function ( obj ) {
readyState: 4
responseJSON: Object
responseText: "{↵ "kind": "fusiontables#sqlresponse",↵ "columns": [↵  "INSEE_COM",↵  "KML",↵  "NOM_COMM"↵ ]}"
setRequestHeader: function ( name, value ) {
state: function () {
status: 200
statusCode: function ( map ) {
statusText: "OK"
success: function () {
then: function ( /* fnDone, fnFail, fnProgress */ ) {
__proto__: Object

The problem, is in this object, i would like get only the object in response JSON. I tried with test.responseJSON, but it doesnt work...

How can i get only the JSON ?

Thanks for your help !

F.

Upvotes: 1

Views: 10459

Answers (4)

Jite
Jite

Reputation: 5847

The test variables value will be the value returned by the $.ajax() function call, not the result. $.ajax will not immediately return the value from the call, its asynchronous, that's why a callback (success: function(e) {}) is used. The success callback will be called when the ajax call have successfully fetched whatever it is asked to fetch.

Check what e is in the success callback!

$.ajax({url: ("/areas/list"), type: 'GET', dataType: 'json', success: function(e) {
  console.log(e); // e == result from the ajax call.
}});

Upvotes: 3

Vicky Gonsalves
Vicky Gonsalves

Reputation: 11717

you are trying to fetch value synchronously, which is not a good practice. You should try the following way:

var test;
$.ajax({  
    url:"/areas/list",  
    type:"GET",  
    dataType:"JSONP",  
    success:function(testdata){  
    console.log(testdata);  
    test=testdata;  
    }  
});

Upvotes: 1

Richard Peck
Richard Peck

Reputation: 76784

1. Are you returning JSON data?

In your AJAX, you're sending a request to a link at /areas/list - how are you handling that request in the Rails controller?

For it to return JSON data, it should read something like this:

#app/controllers/areas_controller.rb
def list
    respond_to do |format|
        format.json { return :json => "hello".to_json }
    end
end

Posting your controller's code will be a big help for us all

2. Are you handling the JSON data correctly?

JSON data is different than "normal" javascript data. It has to be parsed when it is returned from the server, using the JSON parse functions:

$.ajax({ 
     url : ("/areas/list"),
     type : 'GET',
     dataType : 'json',
     success : function(data) {
        var json_data = JSON.parse(data);
        //do what you need here with the new array
    }
});

Upvotes: 1

Chris Hanson
Chris Hanson

Reputation: 731

You're not doing anything with the returned data in the success callback.

This should work:

var test;

$.ajax({ 
  url: "/areas/list", 
  type: 'GET', 
  dataType: 'json', 
  success: function(response) {
    // Do what ever with the response here
    console.log(response);

    // or save it for later. 
    test = response;
  } 
});

If you decide to save the response in a variable you won't be able to access it straight away. The ajax request wont't be complete. Best to do your processing of the JSON object in the success callback.

Upvotes: 4

Related Questions