ruby on rails – Rendering JSON in controller

ruby on rails – Rendering JSON in controller

Youll normally be returning JSON either because:

A) You are building part / all of your application as a Single Page Application (SPA) and you need your client-side JavaScript to be able to pull in additional data without fully reloading the page.


B) You are building an API that third parties will be consuming and you have decided to use JSON to serialize your data.

Or, possibly, you are eating your own dogfood and doing both

In both cases render :json => some_data will JSON-ify the provided data. The :callback key in the second example needs a bit more explaining (see below), but it is another variation on the same idea (returning data in a way that JavaScript can easily handle.)

Why :callback?

JSONP (the second example) is a way of getting around the Same Origin Policy that is part of every browsers built-in security. If you have your API at and you will be serving your application off of your JavaScript will not (by default) be able to make XMLHttpRequest (XHR – aka ajax) requests from services to api. The way people have been sneaking around that limitation (before the Cross-Origin Resource Sharing spec was finalized) is by sending the JSON data over from the server as if it was JavaScript instead of JSON). Thus, rather than sending back:

{name: John, age: 45}

the server instead would send back:

valueOfCallbackHere({name: John, age: 45})

Thus, a client-side JS application could create a script tag pointing at and have the valueOfCallbackHere function (which would have to be defined in the client-side JS) called with the data from this other origin.)

What exactly do you want to know? ActiveRecord has methods that serialize records into JSON. For instance, open up your rails console and enter ModelName.all.to_json and you will see JSON output. render :json essentially calls to_json and returns the result to the browser with the correct headers. This is useful for AJAX calls in JavaScript where you want to return JavaScript objects to use. Additionally, you can use the callback option to specify the name of the callback you would like to call via JSONP.

For instance, lets say we have a User model that looks like this: {name: Max, email: [email protected]}

We also have a controller that looks like this:

class UsersController < ApplicationController
    def show
        @user = User.find(params[:id])
        render json: @user

Now, if we do an AJAX call using jQuery like this:

    type: GET,
    url: /users/5,
    dataType: json,
    success: function(data){
        alert( // Will alert Max

As you can see, we managed to get the User with id 5 from our rails app and use it in our JavaScript code because it was returned as a JSON object. The callback option just calls a JavaScript function of the named passed with the JSON object as the first and only argument.

To give an example of the callback option, take a look at the following:

class UsersController < ApplicationController
    def show
        @user = User.find(params[:id])
        render json: @user, callback: testFunction

Now we can crate a JSONP request as follows:

function testFunction(data) {
    alert(; // Will alert Max

var script = document.createElement(script);
script.src = /users/5;


The motivation for using such a callback is typically to circumvent the browser protections that limit cross origin resource sharing (CORS). JSONP isnt used that much anymore, however, because other techniques exist for circumventing CORS that are safer and easier.

ruby on rails – Rendering JSON in controller

For the instance of

render :json => @projects, :include => :tasks

You are stating that you want to render @projects as JSON, and include the association tasks on the Project model in the exported data.

For the instance of

render :json => @projects, :callback => updateRecordDisplay

You are stating that you want to render @projects as JSON, and wrap that data in a javascript call that will render somewhat like:

updateRecordDisplay({projects => []})

This allows the data to be sent to the parent window and bypass cross-site forgery issues.

Leave a Reply

Your email address will not be published.