絞り込み検索をした結果をAjaxを使って表示させたいのですが、書き換えがうまくいかず、困っています。
音楽のカテゴリー絞り検索です。
DBから取得した検索結果をcontroller内である編集するために、
Active Recordオブジェクトから、配列の中にハッシュを格納させる形で変換しました。
viewに渡す検索結果
[{:id=>1, :songtitle=>"LIFE", :artist =>"キマグレン", :category =>"jpop"}, {:id=>2, :songtitle=>"Because Of You", :artist =>"Ne-Yo", :category=>"R&B"}]
musics_controller.rb
def datasort search_data = Music.includes(:categorynumber).order(created_at: params[:newoldsort]) recodedata = search_data.pluck(:id, :songtitle, :artist, :category) keys = ['id', 'songtitle', 'artist', 'category'] @songdata = search_data.map { |search_data| Hash[*[:id, search_data.id], *[:songtitle, search_data.songtitle], *[:artist, search_data.artist], *[:category, search_data.category]]} # 先ほど言ったある編集とは、新たにhashのキーを追加する処理です。 @songdata.each do |keys| # 各データにキーを新規追加したいので展開します。 if keys[:artist] == 'キマグレン' keys[:catchphrase] = "今、日本で人気のアーティスト" # キャッチフレーズというキーを新規追加 else keys[:catchphrase] = "良いアーティスト" # キマグレン以外のキャッチフレーズ end end end
ちなみに、DBのテーブルは、曲自体のテーブルとカテゴリーテーブルの2つあり、1対多の関係です。
曲テーブルからは1つしか参照できませんが、カテゴリーテーブルからはいくつでも参照できます。
この後はviewに渡し部分テンプレートでAjaxを使ってeach展開させて表示させます。
/view/musics/datasort.js.erb
$('#musicdata').html('<%= j(render partial: 'songs') %>');
/view/musics/_songs.html.erb
<div id="musicdata"> <% @songdata.each do |song| %> <%= link_to song_path(song[:id]) do %> <%#= 曲の詳細ページへのリンク生成 %> <p>キャッチフレーズ:<%= song[:catchphrase] %></p> <p>曲名:<%= song[:songtitle] %></p> <p>アーティスト:<%= song[:artist] %></p> <% end %> <% end %> </div>
ルーティング
get 'musics/datasort' post 'musics/datasort'
絞り込み検索をした際のコンソール
Rendering musics/datasort.js.erb Rendered musics/_songs.html.erb (3.3ms) Rendered musics/datasort.js.erb (28.0ms) Completed 200 OK in 116ms (Views: 73.9ms | ActiveRecord: 4.5ms)
Chromeのパケットをみるとちゃんとpostは受信されているのですが、書き換えだけがうまくいきません。
どうしたら正常に行われるでしょうか?
あなたの回答
tips
プレビュー