What is the proper way to create a JSON object in rails, and then use jQuery/Ajax to get the JSON from an action?

Question

I am trying to write an application that will use an AJAX request to grab some JSON from a rails action. It seems like it works just fine, but when debugging I found that when I output the JSON value I need, it says that it is undefined.

Here's what I have currently:

Rails:

def complete
   @case = Case.find(params[:case_id])
   respond_to do |format|
     format.html
     format.json { render json: { :percentage => @case.complete } } ## Should produce something like {"percentage" => 0} and when I go to this url in my rails app I see that it does.
end

Javascript:

function updatePercentage(id_att, db_id, type) {
  console.clear();
  console.log("updatePercentage was called.");
  $(".loading").progressbar({ value: false });
  $.ajax({
      type: "GET",
      dataType: "json",
      url: "/cases/" + db_id + "/" + type + "_complete.json", // e.g. /cases/42/type_complete.json                                                          
      success: function(result) {
        console.log("\n\nPercentage from AJAX is " + JSON.stringify(result.percentage));
    }
}); 
}

When I go to localhost:3000/cases/XXXX/type_complete.json I see {"percentage":100} So obviously that's getting somewhere. But in the js console I just see "Percentage from AJAX is undefined."

When I say console.log("THE JSON OBJECT I'M GETTING BACK IS " + JSON.stringify(this)); The output is:

JSON: (In console)

  {
        "url": "/cases/980193955/type_complete.json",
        "type": "GET",
        "isLocal": false,
        "global": true,
        "processData": true,
        "async": true,
        "contentType": "application/x-www-form-urlencoded; charset=UTF-8",
        "accepts": {
            "*": "*/*",
            "text": "text/plain",
            "html": "text/html",
            "xml": "application/xml, text/xml",
            "json": "application/json, text/javascript",
            "script": "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"
        },
        "contents": {
            "xml": {},
            "html": {},
            "json": {},
            "script": {}
        },
        "responseFields": {
            "xml": "responseXML",
            "text": "responseText",
            "json": "responseJSON"
        },
        "converters": {
            "text html": true
        },
        "flatOptions": {
            "url": true,
            "context": true
        },
        "jsonp": "callback",
        "dataType": "json",
        "dataTypes": [
            "text",
            "json"
        ],
        "crossDomain": false,
        "hasContent": false
    }

Why is this happening? And how do I fix it? As far as I can tell the JSON data should be there. But Javascript is acting like it's not.

Why are you using this in the success callback? You should provide a parameter to that callback, and use that instead of this. As you've already figured out, this refers to the promise returned by $.ajax — Ian
– Ian, Commented Jul 15, 2014 at 20:27
I used to have it named 'result' but I changed it to the 'this' keyword when I starting handing over other values to a function that wasn't relevant here so I didn't list it. — kingsfoil
– kingsfoil, Commented Jul 15, 2014 at 20:30

bundacia · Accepted Answer · 2014-07-15 20:32:17Z

1

You're super close! You just need to change your success callback like this:

success: function( data ) {
   console.log("\n\nPercentage from AJAX is " + data.percentage);
}

The success callback is passed the json data as a parameter =)

You can also use the jQuery getJSON shorthand method: http://api.jquery.com/jQuery.getJSON/

answered Jul 15, 2014 at 20:32

bundacia

1,0465 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

What is the proper way to create a JSON object in rails, and then use jQuery/Ajax to get the JSON from an action?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related