【rails】Ajaxでコメント一覧を表示する

※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。

目次 表示

目次へ

コメント一覧を表示する

先日、コメント一覧のAPIを作成した

【rails】コメント一覧のAPIを作る

今回は、取得したAPIを使いAjaxでコメント一覧を表示できるようにする

ページをロードした瞬間にコメント一覧を取得する

article.jsを開く

document.addEventListener('DOMContentLoaded', () => {
  const dataset = $('#article-show').data()
  const articleId = dataset.articleId

  axios.get(`/articles/${articleId}/comments`)
    .then((response) => {
      const comments = response.data
    })
  1. DOMContentLoadedのすぐあとで
  2. コメント一覧を取得axios.get(/articles/${articleId}/comments)する
  3. 成功したらthen、response.dataをcommentsに渡す

取得したコメント一覧を表示する

javascriptでコメント一覧を表示する

axios.get(`/articles/${articleId}/comments`)
    .then((response) => {
      const comments = response.data
      comments.forEach((comment) => {
        $('.comments-container').append(
          `<div class="article_comment"><p>${comment.content}</p></div>`
        )
      })
    })
  1. コメント一覧を取得する
    axios.get(`/articles/${articleId}/comments`)
  2. response.dataをcommentsに渡す

    ※ここからはコメント一覧の表示について
  3. commentsの中身をひとつずつ取り出すforEach
  4. 取り出したcommentはfunctionに入れるができる
  5. comments-container（views/articles/show.html.hamlに用意済）の中に
  6. commentをhtmlタグで追加appendする
    `<div class="article_comment"><p>${comment.content}</p></div>`

簡単なhtmlであれば、↑のようにjavascriptの中に書いてしまうこともある

#DAY7

前の記事

【rails】jQueryでコメント投稿フォームを表示する

次の記事

【rails】Ajaxでコメントを投稿する