jsでオブジェクトをセレクトボックスにしたい

Question

前提・実現したいこと

jsのeventsにオブジェクトが入っているのですがこれを下のようなセレクトボックスにしたいです

<option value="7">スクワット</option>
<option value="8">レックプレス</option>
<option value="9">レックカール</option>

events
(3) [{…}, {…}, {…}]0: {id: 7, event: "スクワット"}1: {id: 8, event: "レックプレス"}2: {id: 9, event: "レックカール"}length: 3__proto__: Array(0)

該当のソースコード

function check() {
  let select = document.querySelector("#part");
  select.addEventListener('change',() => {
  const valueName = document.getElementById('part').value;
  const eventSelect = document.querySelector('#event');
  const XHR = new XMLHttpRequest();
  XHR.open("GET",`/muscle_events/${valueName}`,true);
  XHR.responseType = "json";
  XHR.send();
  XHR.onload = () => {
    const events = XHR.response
    debugger
    events.forEach(x=> {
     let option = document.createElement('option');
     option.value = x;
     option.innerHTML = x;
     eventSelect.appendChild(option);
    });
  }
 })
}
  window.addEventListener("turbolinks:load", check);

試したこと

ここに問題に対して試したことを記載してください。

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

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

Answer 1

いったんjsonデータをつくります
//test.json

[{"id":7,"event": "スクワット"},{"id": 8, "event": "レックプレス"},{"id": 9, "event": "レックカール"}]

これをfetchして、HTMLに組み込みます。あとはHTML次第です

Comments

[goriwo]

XHR.onload = () => {
const events = XHR.response
let eventsJson = JSON.stringify(events)
debugger
fetch(eventsJson).then(res=>res.json()).then(data=>{
data.forEach(x=>{
eventSelect.appendChild(Object.assign(document.createElement('option'),{value:x.id,textContent:x.event}));
});
});
}
こんな感じであとはhtmlというかんじでしょうか？