Using jbuilder

In the .json.jbuilder file, we use json object to defile the output JSON node. the syntax in json.any_name, Then passing the value as argument.

For example, jsor.id(@album.id) will output {id: 123}

So, for the album show API, we can create a file named show.json.jbuilder inside views/albums/ folder.

json.id @album.id
json.title @album.title

Or we can create a new node by using the json.name do |json| end block.

The following is an album information with the user basic information.

json.id @album.id
json.title @album.title
json.created_at @album.created_at
json.link album_url(@album)
json.user do |json|
  json.id @album.user.id
  json.email @album.user.email
end

How about listind all the photos in the album?

# photos
json.photos @album.photos do |json, photo|
  json.id photo.id
  json.title photo.title
  json.image_url request.protocol + request.host_with_port + photo.file.url
  json.thumb_url request.protocol + request.host_with_port + photo.file.url(:thumb)
end

The image_url is a little but tricky, the paperclip gem returns relative url only.

we can prepend the URL to the relative path, and the URL is composited by the protocol and host_with_port

If you feel uncomfortable with the long string concatenation here, helper is the place to abstract that long line.

What’s next? We’re going to take a look at “Extracting view code to helpers”.