APIから取得したデータを画面に表示する

こんにちは。oda@エンジニア１年目です。

前回の記事では、json形式で取得したデータを返すAPIを作成しました。

今回は、この取得したデータをAjaxで画面に表示させてみます。

（以下、Rails 6.1.6を使用しています。）

画面の準備

画面を表示させるために次のファイルを準備します。

controllers/students_controller.rb

class StudentsController < ApplicationController
  def index
  end
end

routes.rb

Rails.application.routes.draw do
  resources :students, only: [:index] # ここを追加
  namespace :api, format: 'json' do
    resources :students, only: [:index]
  end
end

views/students/index.html.erb

<div class="title">
  <span>生徒一覧</span>
  <button id="display-btn">表示</button>
</div>
<table>
  <tr>
    <th>１年生</th>
    <th>２年生</th>
    <th>３年生</th>
  </tr>
  <tr>
    <td><ul id='1st-grade'></ul></td>
    <td><ul id='2nd-grade'></ul></td>
    <td><ul id='3rd-grade'></ul></td>
  </tr>
</table>

ブラウザ上では次ように表示されています。（CSSは割愛）

Ajaxで作成したAPIにリクエストを送る

それでは、前回作成した以下の生徒が、表示ボタンを押すと各学年ごとに表示されるようにしていきます。

id(integer)	name(string)	grade(integer)
1	Alice	3
2	Bob	1
3	Charlotte	1
4	Daniel	2
5	Edward	3

今回はjQueryのajaxメソッドを使って、作成したAPIにリクエストを送るので、次のとおりjsファイルを作成します。

students.js

$(function () {
  $('#display-btn').on('click', function() {
    const res = $.ajax({
      url: '/api/students',
      type: 'GET',
      dataType: 'json',
    });
    res.done((res) => {
            console.log('読み込みに成功しました');
      res.students.forEach((student) => {
        switch(student.grade) {
          case 1:
            $('#1st-grade').append(`<li>${student.name}</li>`);
            break;
          case 2:
            $('#2nd-grade').append(`<li>${student.name}</li>`);
            break;
          case 3:
            $('#3rd-grade').append(`<li>${student.name}</li>`);
            break;
        }
      });
    });
    res.fail(() => {
      console.log('読み込みに失敗しました')
    });
  });
});