Rails的 - 從兩個模型獲取JSON - 格式化JSON

Question

我有我的控制器操作的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的成功？

感謝

哈維爾Q

Answer 1

你有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('')); 
    } 
    }); 
}); 

恕我直言字符串連接更容易調試/維護，也更便捷（見Why is string concatenation faster than array join?）

下面是我的眼睛更容易一些，但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); 
    } 
    }); 
});