【解決したい課題】
Rate.jsを使って星レビューの平均値を表示させたい
【現状】(エラー内容)
Articleのshowのコメント一覧には星が問題なく表示されます。
しかし、平均値の星は表示されません。
平均値(1.0)の表示の横に星を表示させたい
使用しているモデルは
Articleモデル、Commentモデルで1:Nの関係でアソシエーションが組まれています
コメントモデルにrateカラムが入っています
【該当ソースコード】
article/show.html.erb
<div class = "container"> <!--星評価の平均値--> <div class="average-score mb-3"> <div class="star-rating ml-2"> <div class="star-rating-front" style="width: <%= @article.avg_score_percentage %>%"> <div id="rate_<%= @comment.id %>"></div> <script> $('#rate_<%= @comment.id %>').raty({ size: 20, starOff: '<%= asset_path('star-off.png') %>', starOn : '<%= asset_path('star-on.png') %>', starHalf: '<%= asset_path('star-half.png') %>', half: true, readOnly: true, score: <%= @comment.rate %>, }); </script> </div> <div class="star-rating-back"></div> </div> <div class="average-score-display"> (<%= @article.avg_score %>点) </div> </div> <!--コメント機能--> <div id = "comment_area", class="w-100 p-3"> <% if user_signed_in? %> <%= render "public/comments/form", comment: @comment %> <% end %> </div> <!--コメント一覧--> <div class="w-100 p-3"> <%= render "public/comments/index", comments: @comments, article: @article %> </div>
Article.rb
class Article < ApplicationRecord belongs_to :user has_many :comments, dependent: :destroy #星の平均値を表示している def avg_score unless self.comments.empty? comments.average(:rate).round(1) else 0.0 end end def avg_score_percentage unless self.comments.empty? comments.average(:rate).round(1).to_f*100/5 else 0.0 end end validates :title, presence: true, length: { minimum: 1 } validates :body, presence: true end ``` Comment.rb
class Comment < ApplicationRecord
belongs_to :article
belongs_to :user
validates :comment_content, presence: true
評価レビュー機能:1以上5以下で星を設定
validates :rate, numericality: {
less_than_or_equal_to: 5, greater_than_or_equal_to: 0.5
}, presence: true
end
Comments_controller ``` def show @comment = Comment.new @comments = @article.comments end ``` comments/_index.html.erb ``` <% @comments.each do |comment| %> <p><%= comment.comment_content %></p> <div id="rate_<%= comment.id %>"></div> <script> $('#rate_<%= comment.id %>').raty({ size: 20, starOff: '<%= asset_path('star-off.png') %>', starOn : '<%= asset_path('star-on.png') %>', starHalf: '<%= asset_path('star-half.png') %>', half: true, readOnly: true, score: <%= comment.rate %>, }); </script> <% if comment.user == current_user %> <p><%= link_to "", article_comment_path(comment.article_id, comment.id), method: :delete, remote: true, class: "far fa-trash-alt" %></p> <% end %> <% end %> ``` <div id="rate_<%= @comment.id %>"></div> の値に@article.avg_score を付けて表示できないかトライアンドエラー中です 下記サイトを参考にしています https://qiita.com/take95/items/a900b46f18e096112b6f 自分ではどのように記述していいかわかりませんでした。 アドバイスを頂けると幸いです。
あなたの回答
tips
プレビュー