Better way to use a json object in a Rails application

Question

In my Rails app I have many categories that have many clients. It also supports switching languages.

The categories are shown in the navigation of the app and I want to make a custom dropdown that contains the clients of that category. It will be created when a user hovers on some of those categories.

I've created a new resource that is doing the job of fetching the clients that belong to the hovered category, but I'm having trouble making those clients linkable due to the internationalization.

This is the javascript code:

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

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

            html = "<a href='/clients/"+response[0]['id']+"' 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 problem here is that I get the links displayed like this:

<a href="/clients/157" class="nearest_client">
  <img src="/uploads/picture/image/361/thumb_image.jpg">Client name
</a>

Notice there is no locale set. It should be like:

<a href="en/clients/157">

Is there a way to get to the set locale? Or am I approaching this problem in a bad way? What is a better way of setting a listener on a div and creating the needed DOM elements from the returned JSON object?

change this html = ""; to this html = ""; – Someth Victory Jun 19 '15 at 14:55 — Someth Victory, Jun 19 '15 at 14:55

max · Answer 1 · 2015-06-19T15:59:19.270

1

The solution is use the Rails link helpers to add the url or path to the JSON output.

If you are using JBuilder (which is installed by default):

# /app/clients/views/show.json.jbuilder
json.id @client.id
json.name @client.name
json.path client_path(@client)
json.url client_url(@client)

But I would recommend using ActiveModel::Serializers:

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

  def url
    client_url(object)
  end

  def path
    client_path(object)
  end
end

See the RailsCast for basic use instructions.

Then you would use it in your javascript like so:

$(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");
    })
});

On a side note - you need to use the VAR keyword when declaring variables in javascript. Otherwise they are created as globals which is a really bad thing. Use JSLint or strict mode to catch misstakes like this.

edited Jun 19 '15 at 15:59

answered Jun 19 '15 at 15:41

max

96,212
14
104
165

ActiveModel::Serializers is pretty superior in terms of speed and is much easier to test. JBuilder is DHH's pet project so it gets bundled with rails - but its slow and using views and partials just to create XML or JSON is just clunky and a bad abstraction. – max Jun 19 '15 at 15:43
Instead of JBuilder I created a whole new namespace and set of controllers that are responding to JSON/XML. Thanks for your input on ActiveModel::Serializers..I didn't use them yet and I'll try them out. But the only question I have is...how is client.url going to work in javascript? Shouldn't the client variable be a client object? Like this in javascript it's only an element from the JSON response... – Marko Ćilimković Jun 21 '15 at 10:45
Based on the code in your question `client` is an object. JSON is basically built out of arrays and objects (which are like hashes in ruby). JSON objects are mapped to javascript objects when parsing - javascript object properties can be accessed by dot notation or square brackets. – max Jun 21 '15 at 11:57
I created the client serializer and followed your steps but the generated a tag isn't good: – Marko Ćilimković Jun 21 '15 at 15:32
There could be several factors, like what is happening in your controller. Could you please create a new question with your updated code? – max Jun 21 '15 at 15:36
I have this in my controller that is generating the JSON response: render json: @closest_clients.to_json(include: {translations: {only: [:name, :content]}) Would render json: @closest_clients resolve the issue? – Marko Ćilimković Jun 21 '15 at 15:38
Please, endless followup questions in comments are horrible. Start a new question. Link to it here and i promise to have a look at it. – max Jun 21 '15 at 15:40

score 0 · Accepted Answer · answered Jun 22 '15 at 12:26

Maxcal was really helpful with his suggestion to use ActiveModel::Serializers, but after I made the necessary changes a lot of my other resources in the API part stopped working properly.

For a quick fix on this I used another data attribute that I passed to javascript:

html = "<a href='"+ $(this).data("language") + '/clients/' + response[0]['id']+"' class='nearest_client'>";

Better way to use a json object in a Rails application

2 Answers2