Javascript Rails-从两个模型获取json-格式化json

我的控制器操作中有一个json响应，如下所示

def index
  ...
  @activities = Activity.includes(:tasks).all

  respond_to do |format|
    format.json {render :json => @activities.to_json(:only=>[:id,:name],:include=>[:tasks])}
  end

end

我得到的回答是：

[{"id":1,"name":"Act1","tasks":
  [{"id":30,"name":"task1"},{"id":29,"name":"task2"},{"id":27,"name":"task3"}]},   
 {"id":7,"name":"Act2","tasks":
  [{"id":31,"name":"tt1"},{"id":28,"name":"tt2"},{"id":30,"name":"tt3"}]},  
 {"id":8,"name":"Act3","tasks":
  [{"id":31,"name":"N1"},{"id":33,"name":"N2"},{"id":28,"name":"N4"}]}
}]

我使用这个ajax调用使用它

  $("#linkto").click(function(e){
    e.preventDefault();
    $.ajax({
      type    : "GET",
      url   : "/activities.json",
      success: function(data) {
        var act = $.map(data, function(f){
            return "<p>" + f.name + "</p>" + "<ul>" + 
            $.map(f.tasks,function(g){
              return "<li>" + g.name +"</li>";
            }).join(''); + "</ul>";
          });
        $('#ctypes').html(act.join(''));
      }
    });
  })

我希望展示这一点：

<p>NAME</p>
<ul>
  <li>task1</li>
  ....
</ul>
<p>NAME</p>
<ul>
  <li>task1</li>
</ul>
.........

但我明白了

<p>NAME</p>
<ul>
  <li></li>
  ...
  <p>NAME</p>
  <ul>
    <li></li>
    ....
    <p></p>
    <ul>........
  </ul>

如何格式化ajax成功

谢谢

---

Javier Q

第11行有一个额外的分号。正确的代码是：

$("#linkto").click(function(e){
  e.preventDefault();
  $.ajax({
    type    : "GET",
    url   : "/activities.json",
    success: function(data) {
      var act = $.map(data, function(f){
          return "<p>" + f.name + "</p>" + "<ul>" + 
          $.map(f.tasks,function(g){
            return "<li>" + g.name +"</li>";
          }).join('') + "</ul>";
        });
      $('#ctypes').html(act.join(''));
    }
  });
});

IMHO字符串连接更易于调试/维护，速度也更快，请参见

下面是一个稍微容易对我的眼睛，但YMMV

$("#linkto").click(function(e){
  e.preventDefault();
  $.ajax({
    type    : "GET",
    url   : "/activities.json",
    success: function(data) {
      var html = '';
      for (var a=0, aLen=data.length; a<aLen; a++) {
        html += "<p>" + data[a].name + "</p>";
        html += "<ul>";
        for (var t=0, tLen=data[a].tasks.length; t<tLen; t++) html +=  "<li>" + data[a].tasks[t].name +"</li>";
        html += '</ul>';
      }
      $('#ctypes').html(html);
    }
  });
});