html5 + js で json ファイルにアクセスしてデータを取得する

少し前に json ファイルの扱いに関して色々と試行錯誤していたので、今後の為にもその過程を少しずつ整理しながらアウトプットしていこうかと思います。まずは基本の「ファイルにアクセス・データ取得」から。

スマホで見る

html5 + js で json ファイルにアクセスしてデータを取得する

事前準備

XMLHttpRequest」でHTTP通信をするため、少し環境の用意が必要です。
Node.js でも可能ですが、当サイトではまだ解説していないので、今回は解説済の「xampp」を使います。環境が整ってない方は下のリンクをご参照ください。

01. xampp-Apache 起動

02. アクセス対象のフォルダ・ファイルの準備

今回は xampp の Apache 起動時(初期設定状態)のルートディレクトリの「htdocs」内に「jsonTest」フォルダを作成し、その中に「index.html、sample.json」の二つのファイルを作成します。(コードは以下を参照)

ファイル構成

[htdocs]
   │
   └─ [jsonTest]
            │
            ├-- index.html
            └─ sample.json

index.html ※UTF-8


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>html5 + js で json ファイルにアクセスしてデータを取得する</title>
<script>
function getJSON() {
	var req = new XMLHttpRequest();						// XMLHttpRequest オブジェクトを生成する
	req.onreadystatechange = function() {				// XMLHttpRequest オブジェクトの状態が変化した際に呼び出されるイベントハンドラ
		if(req.readyState == 4 && req.status == 200){	// サーバーからのレスポンスが完了し、かつ、通信が正常に終了した場合

			var data = JSON.parse(req.responseText);	// 取得した JSON ファイルの中身を変数へ格納
			var len = data.length;						// JSON のデータ数を取得

			// JSON のデータ数分処理
			for(var i=0; i<len; i++) {
				console.log("id: " + data[i].id + ", name: " + data[i].name);
			}

		}
	};
	req.open("GET", "sample.json", false);				// HTTPメソッドとアクセスするサーバーのURLを指定
	req.send(null);										// 実際にサーバーへリクエストを送信
}
</script>
</head>
<body>
<input type="button" value="JSONファイルを取得し、内容をブラウザのコンソールへ出力" onclick="getJSON();">
</body>
</html>

sample.json ※UTF-8


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

jsonファイル内のデータの持ち方は様々ですが、今回自分の要件に合ったものをサンプルとしています。

03. ブラウザから対象ファイルへアクセス・テスト

これまでの解説通りの構成であればアクセスURLは以下のようになります。※別の場所に準備をした場合は適切なURLでアクセスしてください

ページアクセス後、デベロッパーツール表示(Chromeであれば F12 or Ctrl+Shift+I)をしてページ内のボタンをクリックするとコンソールに json ファイルのデータが表示されます。(デベロッパーツールにコンソールが表示されてない場合は「Esc」キーで表示できる)

今回はここまで。また近々 json 系でやったことを記事にしていこうかと思います。

参考リンク

Share