Ajaxでセレクトボックスを作りたい

前提・実現したいこと

筋トレアプリ作成中で以下のようにしたいです
部位ごとに選択したらDBからちがう種目がでるようにしたいです
胸ーベンチ、フライ
背中ーデット、懸垂
脚ースクワット、プレス

該当のソースコード

js
1function check() {
2  let select = document.querySelector("#part");
3
4  select.addEventListener('change',() => {
5  const valueName = document.getElementById('part').value;
6  const XHR = new XMLHttpRequest();
7  XHR.open("GET",`/muscle_events/${valueName}`,true);
8  XHR.responseType = "json";
9  XHR.send();
10  XHR.onload = () => {
11    const events = XHR.response.events
12    debugger
13    const eventSelect = document.getElementById('event')
14    const option = document.createElement('option')
15    
16    eventSelect.appendChild('option')
17  
18  }
19 })
20}
21  window.addEventListener("turbolinks:load", check);
22

Controller
1class MuscleEventsController < ApplicationController
2  def index
3    @muscle_events = MuscleEvent.all
4  end
5
6  def get_menu
7    events = MuscleEvent.where(part:params[:id])
8    render json:{ events: events}
9  end
10end

viwes
1<script src="select.js"></script>
2<p>どこの部位を筋トレしますか？</p>
3<%= form_with url:"root_path" do |f| %>
4  <%= f.select :part, MuscleEvent.parts.keys.map{|k| [I18n.t("enums.muscleevent.parts.#{k}"), k]} %>
5  <%= f.select :event,{} %>
6<% end %>

試したこと

def get_menu
    events = MuscleEvent.where(part:params[:id])
    render json:{ events: events}

 pry(#<MuscleEventsController>)> MuscleEvent.where(part:params[:id])
  MuscleEvent Load (0.6ms)  SELECT `muscle_events`.* FROM `muscle_events` WHERE `muscle_events`.`part` = 2
  ↳ app/controllers/muscle_events_controller.rb:8:in `get_menu'
=> [#<MuscleEvent:0x00007f8c7547ed08 id: 4, part: nil, event: "デットリフト", created_at: Sun, 21 Mar 2021 19:27:21 UTC +00:00, updated_at: Sun, 21 Mar 2021 19:27:21 UTC +00:00>,
 #<MuscleEvent:0x00007f8c754b4728 id: 5, part: nil, event: "懸垂", created_at: Sun, 21 Mar 2021 19:27:21 UTC +00:00, updated_at: Sun, 21 Mar 2021 19:27:21 UTC +00:00>,
 #<MuscleEvent:0x00007f8c754b4660 id: 6, part: nil, event: "ラットプルダウン", created_at: Sun, 21 Mar 2021 19:27:21 UTC +00:00, updated_at: Sun, 21 Mar 2021 19:27:21 UTC +00:00>]

ここまではおくれているのでJSONデータから属性やプロパティを設定がいまいちわかりません
初心者なのでわかりやすく教えてもらえるとありがたいです
このDBからpartが１ならベンチプレス、ダンベルプレス、ダンベルフライとでるように

1	1	ベンチプレス	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
2	1	ダンベルプレス	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
3	1	ダンベルフライ	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
4	2	デットリフト	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
5	2	懸垂	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
6	2	ラットプルダウン	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
7	3	スクワット	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
8	3	レックプレス	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
9	3	レックカール	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
10	4	フロントレイズ	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
11	4	サイドレイズ	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
12	4	リアレイズ	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
13	5	バーベルカール	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
14	5	スカルクラッシャー	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
15	5	ハンマーカール	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
16	6	腹筋	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
17	6	ドラゴンフラッグ	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
18	7	ウォーキング	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
19	7	ランニング	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249
20	8	首	2021-03-21 19:27:21.095249	2021-03-21 19:27:21.095249

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

ここにより詳細な情報を記載してください。

yambejp

2021/03/25 03:29

返ってくるJSONデータサンプルを例示できますか？

goriwo

2021/03/25 04:04

events 0: {id: 4, part: null, event: "デットリフト", created_at: "2021-03-21T19:27:21.095Z", updated_at: "2021-03-21T19:27:21.095Z"} 1: {id: 5, part: null, event: "懸垂", created_at: "2021-03-21T19:27:21.095Z", updated_at: "2021-03-21T19:27:21.095Z"} 2: {id: 6, part: null, event: "ラットプルダウン", created_at: "2021-03-21T19:27:21.095Z", updated_at: "2021-03-21T19:27:21.095Z"} length: 3 __proto__: Array(0) これのことでしょうか？

FKM

2021/03/25 04:32 編集

そのテーブルじゃきついんでは…。部位マスタに対して、イベント用のトランザクションを作りたい場合は、そのトランザクションに部位マスタを参照して紐付けないとだめですよ。

goriwo

2021/03/25 04:41

ほんとですか。。。デットリフト、懸垂、ラットプルまで持って来れたのにうまくいかないものなのですねとなるとテーブルの作り直しからでしょうか？

FKM

2021/03/25 04:43

テーブル設計図あります？一つ付け加えるだけで対応できますけどね。

m.ts10806

2021/03/25 04:47

Ruby on Rails を質問タグとして追加してください

FKM

2021/03/25 04:49

左端の番号は行数じゃなくてidですかね？だったら準備はできてます。なので、部位マスタから紐付けて対象となるデータでプルダウンメニューを作るようにすればいいのではないかなと？

goriwo

2021/03/25 04:57

左端はIDです部位(partカラム)をenumで番号で指定してますそれはAjaxでできるでしょうか？

FKM

2021/03/25 05:00

取得した値をパーシャルでプルダウンメニューを作ってからテンプレートに代入していけば行けると思います <%= f.select :event,{} %> ここを代わりにパーシャルにすればいいのでは？

goriwo

2021/03/25 11:06

意見ありがとうございますとりあえずはベストアンサーの方で頑張ってみますお手数おかけしました

行動規範の内容に同意します

回答1件

ベストアンサー

post/getによる絞り込みはAPI側でやってください

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#part').addEventListener('change',e=>{
4    const event=document.querySelector('#event');
5    event.innerHTML="";
6    if(e.target.value!==""){
7      var params=new URLSearchParams();
8      params.append('part',e.target.value);
9      const url="・・・?"+params.toString();
10      fetch(url).then(res=>res.json()).then(data=>{
11        data.forEach(x=>{
12          event.appendChild(Object.assign(document.createElement('option'),{value:x.event,textContent:x.event}));
13        });
14      });
15    }
16  });
17
18});
19</script>
20<div>部位</div>
21<select id="part">
22<option value="">---</option>
23<option value="胸">胸</option>
24<option value="背中">背中</option>
25<option value="脚">脚</option>
26</select>
27<select id="event">
28</select>
29</div>