前提

planeなJavascriptを使って外部ファイルのJSONの情報を取得するやり方です。

JSONを久しく触っていない＋いつもjQueryでやっていたのでやり方がわからず時間をとったのでここにメモします。

ファイルを作る

まずHTMLファイルとJSONファイルを作成します。

中身はお互いこんな感じ。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>json research</title>
</head>
<body>
    <div class="wrapper">
        <input type="button" value="JSONファイルを取得し、内容をブラウザのコンソールへ出力" onclick="getJSON();">
    </div>
</body>
</html>

[
	{"id":1,"name":"AAA"},
	{"id":2,"name":"BBB"},
	{"id":3,"name":"CCC"}
]

イメージとしてはボタンをクリックするとJSONにある情報を取ってくるといった感じです。

Javascript

古かったら申し訳ないのですが、以下で動作確認できました。

<script>
    function getJSON() {
        let req = new XMLHttpRequest();
        req.onreadystatechange = function() {
            // サーバーからのレスポンスが正常＆通信が正常に終了したとき                
            if(req.readyState == 4 && req.status == 200) {
                // 取得したJSONファイルの中身を変数へ格納
                let data = JSON.parse(req.responseText);
                // JSONのデータ数を取得
                let len = data.length;
                for (let i = 0; i < len; i++) {
                    console.log("id: " + data[i].id + ", name: " + data[i].name);
                }
            }
        };
        //HTTPメソッドとアクセスするサーバーのURLを指定
        req.open("GET", "./sample.json", false);
        //実際にサーバーへリクエストを送信
        req.send(null);
    }
</script>

まとめ

JSONは結構使う場面が多いので覚えておきましょう。

参考