前提・実現したいこと
comment一覧ページに遷移した際に取得したJSONをviewに描画する処理。
流れとしては、
①commentのindexページに遷移する時、comment_controller.rbのindexアクションを通る。
②その際にコメントのデータをJSONで取得する。
③ページ遷移した時に取得したデータをapplication.jsでviewに描画する処理を行う。
となります。
しかし、コメントの一覧ページにはJSONの配列が並ぶのみで実際に描画ができていないのが現状です。。。
該当のソースコード
①commentのindexページに遷移する時、comment_controller.rbのindexアクションを通る。
②その際にコメントのデータをJSONで取得する。
RubyonRails
1class CommentsController < ApplicationController 2 before_action :authenticate_user! 3 4 def index 5 post = Post.find(params[:post_id]) 6 @comment = post.comments.build 7 @comments = post.comments 8 render json: @comments, include: { user: [:profile] } 9 end
③ページ遷移した時に取得したデータをapplication.jsでviewに描画する処理を行う。
となります。
js
1document.addEventListener( 2 "DOMContentLoaded", e => { 3 const dataset = $('#post_show').data() 4 const postId = dataset.postId 5 const appendNewComment = (comment) => { 6 $('#cmnt_user_items').append( 7 `<div class="cmnt_user_item"> 8 <div class="cmnt_avatar_field"> 9 ${comment.user.avatar_url} 10 </div> 11 <div class="cmnt_name_field"> 12 ${comment.user.name} 13 </div> 14 <div class="cmnt_text_field"> 15 ${comment.content} 16 </div> 17 </div>` 18 ) 19 } 20 21 axios.get(`/posts/${postId}/comments`) 22 .then((response) => { 23 const comments = response.data 24 comments.forEach((comment) => { 25 appendNewComment(comment) 26 }) 27 }) 28}
試したこと
js
1axios.get(`/posts/${postId}/comments`) 2 .then((response) => { 3 debugger 4 const comments = response.data 5 comments.forEach((comment) => { 6 appendNewComment(comment) 7 })
このようにdebuggerを挟み、実際にデータが渡っているかどうか確認しました。
console
1Navigated to http://localhost:3000/posts/ 2comments = response.data 3(82) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}......
とデータは無事渡っている様に思えますがこの処理自体が指定したURLと違うページ(commentの一覧ページに遷移する前のページ)始まってしまいます。
原因は検索してみましたが分からずじまいです。。。
あなたの回答
tips
プレビュー