ywork2020.com

Title

JSONファイルを読み込む

目次 (INDEX)

getJSON とは

ここで説明する getJSON とは次の語句からなる jQuery の関数 (速記メソッド) です。
get
読み: ゲット
意味: 取得、確保、調達、至る、到着
JSON
読み: ジェイソン
意味: JavaScript のオブジェクト記法を用いたデータ交換フォーマットのこと。

目次に戻る

getJSON 関数の概要

この関数は、JSON ファイルを読み込んでオブジェクト型のデータとしてパースします。

getJSON() で取得されるデータは、 $.ajax() や $.get() の dataType を "json" にして取得したものと同じです。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

  • url: リクエストする JSON ファイルの URL を指定します。
  • data: リクエスト時にこちらから送信するデータをオブジェクト、オブジェクト型で指定します。
  • success: リクエスト完了時に実行されるコールバック関数です。コールバックされる値は次の通りです。( success, error, notmodified, timeout, parsererror) となります。
$.getJSON(url [, data] [, success])

目次に戻る

サンプルコードと実行結果

ここでは、datatables.json という JSON ファイルを $.getJSON() を使って読込みます。

この datatables.json のデータは配列になっているので、それを table 要素を使って、表として出力してみます。

サンプルコード: CSS 
<style>
	#idResult{
		border: thin solid ##lightcoral;
		padding: 0.3em;
		width: fit-content;
	}
	#idResult table, #idResult th, #idResult td{
		table-layout: fixed;
		border: thin solid ##gray;
		border-collapse: collapse;
		padding: 0 1em;
	}
	#idResult th{
		background-color: ##lightcyan;
	}
	#idResult tr:nth-child(odd){
		background-color: ##paleturquoise;
	}
	#idResult tr:nth-child(even){
		background-color: ##lightblue;
	}
</style>
サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<div><button id="idExe"> Execute getJSON </button></div>
	<div id="idResult">< span> Waiting for execution < /span></div>
	<script>...</script>
</body>
  • 06: button id="idExe" (このボタンをクリックすると getJSON() が実行されます。)
  • 07: div id="idResult" (この要素に getJSON() を実行した結果を表示します。)
サンプルコード: script 
<script>
	$("#idResult").append("<table></table>");
	$("#idResult table").wrapInner("<thead></thead><tbody></tbody>");
	$("#idResult thead").wrapInner("<tr><th>県番号</th><th>県名</th><th>県庁所在地</th></tr>");
	$("#idExe").click(function(){
		$.getJSON("datatables.json", function(success, error){
			$("#idResult span").text(error);
			for(i = 0; i < success.length; i++){
				$("#idResult tbody").append(
					"<tr>" + 
						"<td>" + success[i].No + "</td>" + 
						"<td>" + success[i].Field1 + "</td>" + 
						"<td>" + success[i].Field2 + "</td>" + 
					"</tr>"
				);
			}
		});
	});
</script>
    ※コードが多少、複雑かもしれませんので、要点となる行のみの説明とします。
  • 06-17: $.getJSON("datatables.json", function(success, error){ 取得成功時の処理 })
    • "datatables.json" は読み込む JSON ファイルの名前です。
    • success は読込み成功時に JSON のデータをパースしたオブジェクト配列です。ここでは success[ i 番目 ].キー という記述でオブジェクト配列の中から i 番目のオブジェクトの キー名に該当する値を取得しています。
    • error は成功時に [ success ] の文字値を返します。少し紛らわしいですが、前行の success とは別物です。
    • 取得成功時の処理 の部分では tbody 要素内に tr , td の要素と共にデータを書き出しています。
サンプルコード: JSON ( datatables.json ) 
[
    { "No":1, "Field1":"北海道", "Field2":"札幌市" },
    { "No":2, "Field1":"青森県", "Field2":"青森市" },
    { "No":3, "Field1":"岩手県", "Field2":"盛岡市" },
    { "No":4, "Field1":"宮城県", "Field2":"仙台市" },
    { "No":5, "Field1":"秋田県", "Field2":"秋田市" },
    { "No":6, "Field1":"山形県", "Field2":"山形市" },
    { "No":7, "Field1":"福島県", "Field2":"福島市" },
    { "No":8, "Field1":"茨城県", "Field2":"水戸市" },
    { "No":9, "Field1":"栃木県", "Field2":"宇都宮市" },
    { "No":10, "Field1":"群馬県", "Field2":"前橋市" },
    { "No":47, "Field1":"沖縄県", "Field2":"那覇市" }
]
実行結果:
Waiting for execution

目次に戻る