Rails 4: Rendering JSON object (from AJAX response) into view

Question

I'm using Rails 4 and I'm quite new to JSON objects.

I have a controller:

class UsersController < ApplicationController

 def select_users

   @users = User.all
   respond_to do |format|
     format.html
     format.js {} 
     format.json { 
        render json: {:users => @users}
     } 
   end
 end
end

And a javascript users.js:

$.ajax({
    url:  "/users/select_users",
    dataType: "json",
    data: {
        prezzario: ui.item.value
    },
    success: function(data) { 
        $('#usersList').append(data.users);
    }
});

Now I want to render this collection of users in a div, but I don't know how. In the data response I have in the console the correct data, with an object like this:

{"users":[{"_id":{"$oid":"536cf7b6b8dd181f4b7acf9f"},"children":[{"$oid":"536cf7b6b8dd181f4b7acfa0"},{"$oid":"536cf7b7b8dd181f4b7acfd1"}],"description":"Some description.","name":"My name","user_id":"1"},{...........}]}

I have a partial /users/_users.html.erb with classic users.each and prints of all properties. If I try

$('#usersList').append("<%= render 'users', :locals{ :users => "+data.users+"} %>");

I find in the div #usersList <%= render 'users', :locals{ :users => undefined }%>

I want to create a partial template and use it to render users. How can I do this?

negative · Accepted Answer · 2014-05-15 20:45:56Z

4

There are 3 solutions (that i can think of):

Your controller can render HTML on the backend that you append to your js, like

 class UsersController < ApplicationController

   def select_users
     @users = User.all
     render "view", :users => @users
   end

and

 success: function(data) {
   $('#usersList').append(data);
 }

You can use something like Moustache or Handlebars. Never used it, so I can't do a proper example. Sorry.

You can render the html in side the success code like

 success: function(data){
   data.users.forEach(function(user){
     $user_html = $("<div class='user'>" + user.name + "<!-- etc --!/></div>");
     $('#usersList').append($user_html);
   });
 });

answered May 15, 2014 at 20:45

negative

715 bronze badges

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

4 Comments

Giuseppe Over a year ago

Thank you. Now as ajax response I have an html page, but I have two problem:

Giuseppe Over a year ago

Thank you. Now as ajax response I have an html page, but I have two problems: 1. $('#usersList').append(data); don't produce any result. 2. users are rendered in a complete view with header footer, while I want to render only in a partial and then add this partial to the page from which the ajax call has been performed.

Giuseppe Over a year ago

I resolved using in the ajax call dataType 'html' and in the controller render partial: 'users' . Thanks for help!

negative Over a year ago

No problem! Glad i could help. If you want to render a full view, you can do render "view", :layout => false and it will render the view w.o all the layout stuff.

Mantosh · Accepted Answer · 2014-05-15 20:38:32Z

1

You have to $.parseJSON(data); first.

Like

 $.ajax({
    url:  "/users/select_users",
    dataType: "json",
    data: {
       prezzario: ui.item.value
    },
    success: function(data) { 
       var r = $.parseJSON(data);
       console.log(r.users)//This is where Your users are
    }
});

answered May 15, 2014 at 20:38

Mantosh

619 bronze badges

Collectives™ on Stack Overflow

Rails 4: Rendering JSON object (from AJAX response) into view

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related