ActiveModel::Serializer not working

Question

I have a Client model and a method in my controller that should return the nearest clients. I'm using ActiveModel::Serializers but it's not working.

class ClientSerializer < ActiveModel::Serializer
  attributes :id, :name, :path, :url

  def url
    client_url(object)
  end

  def path
    client_path(object)
 end
end

controller:

def nearby_from_category
    @closest_clients = Client.from_category(params[:category]).
      activated.locateable.all_with_translation(@lang).
      by_distance(origin: remote_ip).limit(2)

    render json: @closest_clients.to_json(include: {
      translations: {only: [:name, :content]},
      pictures: {only: :image}
    })
end

javascript:

$(function () {
  $(".nav_category").hover(function () {
    var category_dropdown = $(this).children(".category_dropdown");
    var clients_from_category = category_dropdown.children(".clients_from_category");
    var category_dropdown.toggle(0, "hidden");

    $.get($(this).data("url"), function(response) {
        var client = response[0];
        var client_name = client['translations'][0]['name'];
        var client_picture = client['pictures'][0]['image']['thumb']['url'];
        var html;

        html = "<a href='+ client.url +' class='nearest_client'>";
        html += "<img src='" + client_picture +"'>";
        html += client_name;
        html += "</a>";
        clients_from_category.html(html);
    });
  }, function() {
    $(this).children(".category_dropdown").toggle(0, "hidden");
  })
});

The html that gets output is this:

<a href="undefined" class="nearest_client"><img src="/uploads/picture/image/361/thumbimage.jpb</a>

Answer 1

When using ActiveModel::Serializers (AMS) you should simply use:

render json: @post

The whole point of serializers is to move your json structure out of your controllers. So lets start out by getting rid of the include hash in the render call:

def nearby_from_category
  @closest_clients = Client.from_category(params[:category]).
    activated.locateable.all_with_translation(@lang).
    by_distance(origin: remote_ip).limit(2)
  render json: @closest_clients
end

In most cases AMS can figure out which serializer to use for collections by itself by looking at the contents. You can specify it manually with the each_serializer option.

To include the translations and pictures you would redefine your serializer:

class ClientSerializer < ActiveModel::Serializer
  attributes :id, :name, :path, :url

  has_many: :translations
  has_many: :pictures

  def url
    client_url(object)
  end

  def path
    client_path(object)
  end
end

class TranslationSerializer < ActiveModel::Serializer
  attributes :name, :content
end

class PictureSerializer < ActiveModel::Serializer
  attributes :image
end

One big gotcha is that you may be creating a N + 1 query issue since the associations will be loaded separately for each client unless joined. This is not an AMS specific issue.

The many resulting SQL queries will slow down your server and can cause it to run out of memory. See the rails guides for potential solutions.

Answer 2

This is not working because your controller isn't actually rendering out using the ActiveModel::Serializer. You'd need to write it like this:

def nearby_from_category
    @closest_clients = Client.from_category(params[:category]).
      activated.locateable.all_with_translation(@lang).
      by_distance(origin: remote_ip).limit(2)

    render json: @closest_clients
end

---

In the event that you want to customize the serializer as indicated by the additional args on your to_json call, you'd have to modify the ClientSerializer that already exists to:

class ClientSerializer < ActiveModel::Serializer
  attributes :id, :name, :path, :url

  has_many :translations
  has_many :pictures

  def url
    client_url(object)
  end

  def path
    client_path(object)
  end
end

class TranslationSerializer < ActiveModel::Serializer
  attributes :name, :content
end

class PictureSerializer < ActiveModel::Serializer
  attributes :image
end