Q&A
実現したいこと
- 新規投稿時(reviews/new)に入力した5種類のレビュー項目の平均点を、レビュー一覧ページ（homes/top）で出力させたいです。
【↓ 新規投稿画面のレビュー5項目 ↓】
【↓ レビュー投稿一覧ページの平均点箇所（ワイヤフレーム図） ↓】
前提
Railsでレビュー投稿サイトを作成しております。
現在、Raty.jsを導入し、レビュー投稿(reviews/new)・投稿一覧ページ（homes/top）を作成中です。
発生している問題・エラーメッセージ
- 「実現したいこと」で述べておりましたが、レビュー新規投稿する際に予め設定している5項目の評価を入力し、投稿するようにしています。
- 投稿一覧ページでその5項目の平均点を出力させたいのですが、１つの評価の点数のみ表示されます。
- 平均点の左側に星マークを出したいのですが、数字のみ表示されます。（画像では「：4.0」のみ）
下記画像
該当のソースコード
schema.rb
1 create_table "reviews", force: :cascade do |t| 2 t.integer "user_id", null: false 3 t.string "title", default: "", null: false 4 t.string "body", default: "", null: false 5 t.boolean "review_type", default: true, null: false 6 t.datetime "created_at", precision: 6, null: false 7 t.datetime "updated_at", precision: 6, null: false 8 t.index ["user_id"], name: "index_reviews_on_user_id" 9 end 10 11 create_table "stars", force: :cascade do |t| 12 t.integer "review_id", null: false 13 t.string "name", default: "", null: false 14 t.float "score", default: 0.0, null: false 15 t.datetime "created_at", precision: 6, null: false 16 t.datetime "updated_at", precision: 6, null: false 17 t.index ["review_id"], name: "index_stars_on_review_id" 18 end
reviews_controller.rb
1 def new 2 @review = Review.new 3 # raty.js用のフォーム 4 @star = Star.new 5 end 6 7 def create 8 @review = Review.new(review_params) 9 if @review.save! 10 # @review.star.create(name: "ゲレンデ", score: params[:star][:star2]) 11 @review.stars.create({ 12 { name: "ゲレンデ", score: params[:star][:star] }, 13 { name: "コストパフォーマンス", score: params[:star][:star2] }, 14 { name: "接客・サービス", score: params[:star][:star3] }, 15 { name: "設備の充実", score: params[:star][:star4] }, 16 { name: "周辺設備", score: params[:star][:star5] }, 17 }) 18 redirect_to homes_top_path 19 else 20 render :new 21 end 22 end
reviews/new.html.erb（レビュー新規投稿ページ）
1 <tr> 2 <th>評価</th> 3 <td> 4 ゲレンデ<div id="post_raty"></div> 5 <script> 6 var elem = document.getElementById('post_raty'); 7 var opt = { 8 starOn: "<%= asset_path('star-on.png') %>", 9 starOff: "<%= asset_path('star-off.png') %>", 10 starHalf: "<%= asset_path('star-half.png') %>", 11 half: true, 12 scoreName: 'star[star]', 13 }; 14 raty(elem,opt); 15 </script> 16 17 コストパフォーマンス<div id="post_raty2"></div> 18 <script> 19 var elem = document.getElementById('post_raty2'); 20 var opt = { 21 starOn: "<%= asset_path('star-on.png') %>", 22 starOff: "<%= asset_path('star-off.png') %>", 23 starHalf: "<%= asset_path('star-half.png') %>", 24 half: true, 25 scoreName: 'star[star2]', 26 }; 27 raty(elem,opt); 28 </script> 29 30 接客・サービス<div id="post_raty3"></div> 31 <script> 32 var elem = document.getElementById('post_raty3'); 33 var opt = { 34 starOn: "<%= asset_path('star-on.png') %>", 35 starOff: "<%= asset_path('star-off.png') %>", 36 starHalf: "<%= asset_path('star-half.png') %>", 37 half: true, 38 scoreName: 'star[star3]', 39 }; 40 raty(elem,opt); 41 </script> 42 43 設備の充実<div id="post_raty4"></div> 44 <script> 45 var elem = document.getElementById('post_raty4'); 46 var opt = { 47 starOn: "<%= asset_path('star-on.png') %>", 48 starOff: "<%= asset_path('star-off.png') %>", 49 starHalf: "<%= asset_path('star-half.png') %>", 50 half: true, 51 scoreName: 'star[star4]', 52 }; 53 raty(elem,opt); 54 </script> 55 56 周辺設備<div id="post_raty5"></div> 57 <script> 58 var elem = document.getElementById('post_raty5'); 59 var opt = { 60 starOn: "<%= asset_path('star-on.png') %>", 61 starOff: "<%= asset_path('star-off.png') %>", 62 starHalf: "<%= asset_path('star-half.png') %>", 63 half: true, 64 scoreName: 'star[star5]', 65 }; 66 raty(elem,opt); 67 </script> 68 </td> 69 </tr>
homes/top.html.erb
1 <% @reviews.each do |review| %> 2 <div> 3 <!-- get_user_imageにundefined methodが出る --> 4 <!-- 複数形に対して画像の --> 5 <%= image_tag review.user.get_user_image(100,100) %> 6 <%= review.user.name %> 7 </div> 8 9 <!-- 投稿画像が表示されない（ユーザー画像が取得されている？） --> 10 <%= image_tag review.get_review_image(200,200) %> 11 12 <!-- レビューの平均を出したい --> 13 <!-- 参考サイト：https://qiita.com/kcl215/items/e226ac58d14360fd1b8e --> 14 <div class="starrate"> 15 <%# 平均点を算出し、round関数で切り上げ %> 16 <%=@all_score %>：<%= review.stars.average(:score).to_f.round(1) %> 17 <%# 評価数を星に置き換える %> 18 <div class="average-review-rating" data-score=<%= review.stars.average(:score) %>></div> 19 <%# jquery発火イベントを記載%> 20 <script> 21 $('#star').empty(); 22 $('.average-review-rating').raty({ 23 readOnly: true, 24 starOn: "<%= asset_path('star-on.png') %>", 25 starOff: "<%= asset_path('star-off.png') %>", 26 starHalf: "<%= asset_path('star-half.png') %>", 27 score: function() { 28 return $(this).attr('data-score') 29 } 30 }); 31 </script> 32 </div> 33 34 <%= review.title %><br> 35 <%= review.body %> 36 <% end %>
試したこと
- rails cでStar.all（星評価用のテーブル）でTerminalを見たところ、5項目の内、最後の項目のみが送信されていました。
（「周辺設備」のみのデータが送られており、その他の4項目は未送信）
↓
投稿時点でデータが送られていないと思い、controllerの記述を見直しましたが修正するまで漕ぎつけておりません、、、
- reviews_controllerのレビュー評価の5項目を1つ1つ｛｝で囲い、個包装したところ、引数エラーが発生。
↓
viewページでの修正が必要？
補足情報（FW/ツールのバージョンなど）
Rails 6.1.7.3
raty.js 4.1.1
回答1件
1
ベストアンサー
とりあえず「（「周辺設備」のみのデータが送られており、その他の4項目は未送信）」ここの問題を
@review.stars.create({ name: "ゲレンデ", score: params[:star][:star], name: "コストパフォーマンス", score: params[:star][:star2], name: "接客・サービス", score: params[:star][:star3], name: "設備の充実", score: params[:star][:star4], name: "周辺設備", score: params[:star][:star5], })
create が１回だけなので、一つだけ作れらます。
引数のHashのなかにkeyとして :name, :score が５回ずつでてますが、同じ keyなので上書きされて結果最後のものだけが有効になってます。
投稿2023/05/23 22:48
総合スコア23151
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/05/24 14:05
2023/05/24 20:12
2023/05/25 23:16 編集
2023/05/25 23:22
2023/05/28 01:18