在Rails中使用ajax呈现查询

以下问题需要帮助或指导。我使用ajax从数据库中动态重新加载查询，每次都是在搜索表单中更改

目的是根据搜索表单中选择的参数动态加载N个寄存器

我有这样的代码，允许我对数据库进行查询，并将结果打印在索引中。代码正在工作，最后每次迭代都会在查询结果中为每个注册表打印一个"正方形"（）。

控制器：

 def clientsjson
      @search  =  Client.search(params[:q])
      @clients = @search.result
      respond_to do |format|
        format.json { render :json => @clients }
      end
  end

Js文件

$(document).ready(function() {
   $( ".searchupdate" ).change(function() {
    $.getJSON("/client/clientsjson?"+$('#client_search').serialize(), function (data) {
        var $ul = $('<div></div>');
         $ul.append(data.map(function(data) {
                var $ini= '<div class='"panel-mate bgray-o'"><div class='"row'">'
                var $inicio='<div class='"col-xs-4'" align='"center'">'
                var $titulo='<h3 style="height:45px; width:100% overflow:hidden"><a class="h1-small" href="/es/auctions/'+data['id']+'">'+data['name']+'</a></h3>'
                var $titulo2='<h5 class="cursive txt-gray-lig negrita font-serif">City, Country</h5>'
                var $titulo3='<h5 class="cursive txt-gray-lig negrita font-serif">Idioma:</h5>'
                var $titulo4='<a data-toggle="modal" data-id="1" title="View comments" class="open-modal-auction" href="#myModalc'+data['id']+'"><h5 class="txt-auto" style="margin-top: 10px">'
          var $titulo5='Rating:<img src="/assets/estrella-991be5754e32c5209a9b4c697cf93320.png" alt="Estrella" width="20" height="20" /><img src="/assets/estrella-991be5754e32c5209a9b4c697cf93320.png" alt="Estrella" width="20" height="20" /><img src="/assets/estrella-991be5754e32c5209a9b4c697cf93320.png" alt="Estrella" width="20" height="20" /></h5></a>'
                var  $fin='</div>'
              var $column2='<div class='"col-xs-5'" align='"center'"><br>'
              var $parte1 ='<h4 class="negrita cursive font-serif">'+data['date']+'</h4>'
              var $parte2 ='<h3 class="negrita cursive font-serif" style="margin-top: 2px">Maximum Price<span class="txt-mor ">'+data['maximum_price']+'</span></h3> <h5 class="cursive txt-gray-lig"> Duración: '+data['duration']+'</h5>'
              var $parte3 ='<br/><p style="margin-top:-12px"><a data-toggle="modal" data-id="1" title="Bid" style:"width:120px;" class="open-modal-auction btn btn-morado luz-btn-mor" href="#myModal'+data['id']+'">Puja Avanzada</a></p>'
              var $column2fin='</div>'
              var $column3='<div class="col-xs-3 div-general" align="center" style="padding:">'
              var $column1='<p style="margin-top: 20px"><img src="/assets/bid-c355299aa9a59c701f6768169153b0e6.jpg" alt="Bid" width="75" height="50" /><a data-toggle="modal" data-id="1" title="Bid"  class="open-modal-auction" href="#myModalbids'+data['id']+'" style="margin-left:5px">Pujas</a></p>'
              var $form='<div class="borde-color-mora" style="padding-top:5px; margin-top:20px"><form novalidate="novalidate" class="formtastic bid" id="new_bid" action="/es/bids" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="QkFLk2OiMkFyMx5eeYqsAWex8DVeSpAT2YOnr1sY3kOIXKjsx4F0GRHs7a6byMCReue0Y82EScIUWXSErRxnhA==" /><div class="hidden input optional form-group" id="bid_auction_id_input"><span class="form-label"><label for="bid_auction_id" class=" control-label">Auction</label></span><span class="form-wrapper"><input id="bid_auction_id" value="1" type="hidden" name="bid[auction_id]" /></span></div><p align="left" style="margin-left:5px">Pujar  <input class="borde-color-mora" style="width: 100px; text-align:right" type="text" value="0.0" name="bid[amount]" id="bid_amount" /></p>'
          var $form2='<input type="submit" name="commit" value="Bid Fast" class="btn btn-morado luz-btn-mor" id="button-bid" style="margin-top:5px; margin-bottom:20px" data-loading-text="Loading..." autocomplete="off" /></form></div>'
              var $column3fin='</div>'
                var $end= '</div></div>'


         return $($ini+$inicio+$titulo+$titulo2+$titulo3+$titulo4+$titulo5+$fin+$column2+$parte1+$parte2+$parte3+$column2fin+$column3+$column1+$form+$form2+$column3fin+$end)
         }));
         $('#clientList1').html('');
         $('#clientList1').empty().append($ul);

    });
  });
});

Html:

<div id="clientList1"></div>

好吧，正如我之前所说的，代码几乎完美地工作。但我有两个主要问题。

1-）模型客户端，有几个模型父级，如：国家、城市、语言等。json查询只带来ID，但不让我获得打印的名称。类似于："客户.国家.名称"。那么我如何访问父母的模型，这样我就可以打印姓名，而不是ID

2-）与第一个问题类似，但与儿童模型类似，类似于："客户评论"。通常我会这样<%=render client.comments%>，但我无法从JSON中做到这一点，所以这里的问题是如何访问与查询中每个寄存器关联的子模型。

有更好的方法吗？

提前谢谢。

////更新

调用此localhost:3000/client/clientsjson.json之后？q=在我的浏览器中测试，这是输出：

[{"comments":[]},{"comments":[]}, {"comments":[]}]

Json Builder文件：

json.array! @clients do |client|
  json.id
  json.name
  json.rate
  json.address
  json.date
  json.numbercomments
  json.comments client.comments, :subject, :comment,:created_at
  json.country do
    json.name
  end
  json.city do
    json.name
  end
  json.language do
    json.name
  end
end

这是我在route.rb中制定的行动路线。

get 'client/clientsjson' => "clients#clientsjson", :as => 'clientsjson', :format => :json