DBから非同期通信でデータを取得し、グラフを作成したいです。

Question

前提・実現したいこと

成績管理アプリを試験的に作っております。
その上で、検索フォームで取得した内容を元に非同期通信でグラフを作成したいと考えております。
大変拙いコードではございますが、お力添えいただければ幸と存じます。

「インスタンス変数に指定のデータを代入してjsに渡したい。」
これが一番実現したいことです。

処理の流れ

①フォームにkeywordを入力。
②検索ボタンクリック。
③jsでscoreアクションへリクエスト。
④keywordを元にDBを検索。
⑤DBから取得したデータをインスタンス変数@scoreに代入。
⑥@scoreをjsに返却。
⑦返却されたデータを元にグラフを描画。

該当のテーブルとカラム
テーブル名：scores
カラム：name、jpn、math、science、social、english
バリデーション：無し

環境

macOS BigSur
rails 6
ruby 2.6.5
chart.js

発生している問題・エラーメッセージ

エラーは特に発生しておりませんが、検索した際のkeywordが正しくコントローラー側へ送られていないようです。それによって正しく検索されず、DB上の全てのデータが@scoresインスタンスに代入されてしまいます。

該当のソースコード

下記はルーティングです。

resources :scores do
    collection do
      get 'search'
    end
  end

下記が該当のHTMLです。form_withで取得したkeywordをコントローラへ送信します。
jsで作成したグラフをここで描画します。

<div>
  <%= form_with(url: search_scores_path, method: :get, id: "search-form") do |form| %>
  <%= form.text_field :keyword %>
  <%= form.submit "検索", id: "submit-btn" %>
  <% end %>
</div>
<canvas id="myBarChart" width="800" height="400"></canvas>

下記はscoresコントローラのsearchアクションです。
こちらでkeywordを受け取り、SearchScoresServiceモデルのsearchアクションの引数に渡します。検索をかけた後、@scoreに代入し、JavaScriptに返却します。

def test
end

def search
  respond_to do |format|
    @score = SearchScoresService.search(params[:keyword])
    format.json {
      render json: {score: @score}
     }
  end
end

下記が検索をしてくれるメソッドです。name(受験したテスト名です。)が完全一致した場合に戻り値を返します。

class SearchScoresService
  def self.search(search)
    Score.where('name LIKE(?)', "%#{search}%")
  end
end

下記はコントローラへリクエストを送り、レスポンスを受け取るためのJavaScriptです。
レスポンスされたデータを元に、グラフを作成します。

function findScore(){
  const submitBtn = document.getElementById("submit-btn");
  submitBtn.addEventListener("click", function(e){
    
    const formData = new FormData(document.getElementById("search-form"));
    const XHR = new XMLHttpRequest();
    XHR.open('GET', '/scores/search.json', true);
    XHR.responseType = "json";
    XHR.send(formData);

    XHR.onload = function() {
      const score = XHR.response.score
      // 確認用
      // console.log(score)
      const jpn = score[0].jpn
      const math = score[0].math
      const science = score[0].science
      const social = score[0].social
      const english = score[0].english
      
      const ctx = document.getElementById("myBarChart");
      const myBarChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ["国語", "数学", "理科", "社会", "英語"],
          datasets: [{
            label: "成績",
            backgroundColor: ["#ff7f7f", "#80b3ff", "#80ffb3", "#e6ff80", "#e680ff"],
            data: [jpn, math, science, social, english]
          }]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,
              }
            }]
          }
        }
      });
    };
    e.preventDefault();
  });
};

window.addEventListener("load", findScore);

試したこと

①binding.pryでコントローラへ値が送られているかを確認してみました。

pry(#<ScoresController>)> params[:keyword] #=>nil

全く送られていません。

[1] pry(#<ScoresController>)> @score = SearchScoresService.search(params[:keyword])
  Score Load (1.1ms)  SELECT `scores`.* FROM `scores` WHERE (name LIKE('%%'))
  ↳ app/controllers/scores_controller.rb:19:in `search'
=> [#<Score:0x00007ffaf17d7b18 id: 96, name: "テスト1", jpn: "90", math: "90", science: "90", social: "90", english: "90", text: "wow", created_at: Wed, 27 Jan 2021 12:16:27 UTC +00:00, updated_at: Wed, 27 Jan 2021 12:16:27 UTC +00:00, user_id: 2>,
 #<Score:0x00007ffaf3246da0 id: 97, name: "テスト2", jpn: "50", math: "60", science: "70", social: "80", english: "90", text: "", created_at: Wed, 27 Jan 2021 13:27:31 UTC +00:00, updated_at: Wed, 27 Jan 2021 13:27:31 UTC +00:00, user_id: 2>,
 #<Score:0x00007ffaf3246cd8 id: 98, name: "I am Mike", jpn: "50", math: "50", science: "50", social: "50", english: "50", text: "My name is Mike", created_at: Wed, 27 Jan 2021 23:54:29 UTC +00:00, updated_at: Wed, 27 Jan 2021 23:54:29 UTC +00:00, user_id: 2>]

検索したkeywordに完全一致したデータだけが欲しいのですが、全てが代入されてしまっています。

②form_withに「remote: true」を追加してみました。

調べるとform_withはデフォルトがremote: trueなので、特に記述する必要はなかったようです。処理に変化はありませんでした。

③リクエスト時にjsから送るFormDataのインスタンス?の中身を確認してみました。

console.log(...formData.entries());

上記で中身を確認すると

このような配列が出てきたので、

XHR.send(formData[0]);
または
XHR.send(formData[1]);

と、してみましたがこれもまた特に影響はありませんでした。エラーすら出てくださいませんでした。

以上になります。
ご不明な点、ご指摘等ございましたら、お気軽にお尋ねください。
大変稚拙な質問内容ではございますが、どうかよろしくお願い致します。

補足情報（FW/ツールのバージョンなど）

Answer 1

collectionをmemberに変更し、idをparamsで取得することでリソースを識別できるように変更しました。

resources :scores do
    member do
      get 'search'
    end
  end

従って、jsのエンドポイントも下記のように変更しました。

// 省略
const formData = new FormData(document.getElementById("search-form1"));
const idForParams = formData.get("keyword")

const XHR = new XMLHttpRequest();
XHR.open('GET', `/scores/${idForParams}/search`, true);
// 省略