Rails 4:将JSON对象(来自AJAX响应)渲染到视图中

时间:2022-10-08 21:15:57

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

我正在使用Rails 4,我对JSON对象很新。

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:

和一个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:

现在我想在div中呈现这个用户集合,但我不知道如何。在数据响应中,我在控制台中有正确的数据,对象如下:

{"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

我有一个部分/users/_users.html.erb与经典users.each和所有属性的打印。如果我试试

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

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

我在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?

我想创建一个部分模板并使用它来呈现用户。我怎样才能做到这一点?

2 个解决方案

#1


3  

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

有3种解决方案(我能想到):

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

    您的控制器可以在您附加到js的后端呈现HTML,例如

     class UsersController < ApplicationController
    
       def select_users
         @users = User.all
         render "view", :users => @users
       end
    

    and

     success: function(data) {
       $('#usersList').append(data);
     }
    
  2. You can use something like Moustache or Handlebars. Never used it, so I can't do a proper example. Sorry.

    你可以使用像胡子或把手这样的东西。从未使用它,所以我不能做一个正确的例子。抱歉。

  3. You can render the html in side the success code like

    你可以在成功代码的侧面渲染html

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

#2


1  

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

你必须$ .parseJSON(数据);第一。

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
    }
});

#1


3  

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

有3种解决方案(我能想到):

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

    您的控制器可以在您附加到js的后端呈现HTML,例如

     class UsersController < ApplicationController
    
       def select_users
         @users = User.all
         render "view", :users => @users
       end
    

    and

     success: function(data) {
       $('#usersList').append(data);
     }
    
  2. You can use something like Moustache or Handlebars. Never used it, so I can't do a proper example. Sorry.

    你可以使用像胡子或把手这样的东西。从未使用它,所以我不能做一个正确的例子。抱歉。

  3. You can render the html in side the success code like

    你可以在成功代码的侧面渲染html

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

#2


1  

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

你必须$ .parseJSON(数据);第一。

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
    }
});