【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