JavaScriptでJSONファイルを読み込み、JSONファイル内の配列をランダム表示したいです。

Question

前提

ここに質問の内容を詳しく書いてください。
（例）
JavaScriptでJSONファイルを読み込み、ランダムに表示するシステムを作っています。

実現したいこと

JSONファイルをJavaScriptで読み込んで、
画面上にランダム表示したいです。

エラーは発生していないのですが、どうやってランダム表示させれば
いいのかわかりません。

該当のソースコード

JavaScriptファイル

const btn = document.querySelector('button'); // ボタン要素を取得

btn.addEventListener('click', () => {
// ボタンをクリックしたとき
async function load() {
// ファイルを読み込む
const data = await fetch('word.json');
// JSONとして解析
const obj = await data.json();
console.log(obj);

// テキストを出力
document.querySelector('#log').innerHTML = obj[0]["word"];  

}
load();
});
//JSONファイル”ID”:"０"の”word”、oneが表示される←ここをランダム表示にしたいです。

##################################
JSONファイル（word.json）

[{"ID":"0",
"class":"a",
"word":"one",
"mean":"1つの、1人の","":""
},
{"ID":"1",
"class":"a",
"word":"the",
"mean":"その","":""
},
{"ID":"2",
"class":"a",
"word":"you",
"mean":"あなたは",
"":""
},
{"ID":"3","class":"a",
"word":"my",
"mean":"私の",
"":""
},
{"ID":"4",
"class":"a",
"word":"father",
"mean":"父",
"":""
}]

Answer 1

どうやってランダム表示させれば

Math.random() 関数を使うことで0 以上 1 未満のランダムな小数を求めることが出来ます。
この数値にアイテムの数をかければランダムなインデックスを求めることができます。

let random = Math.floor(Math.random() * obj.length);
document.querySelector('#log').innerHTML = obj[random]["word"];  

＜参考＞
■ 乱数を生成する(Math.random)
https://www.javadrive.jp/javascript/math_class/index8.html

Comments

[teshiyasato]

こうやって作るのですね！何日間も悩んでいたのですがご教授いただいたおかげで前に進むことができます！本当にありがとうございます！