JavaScript

jQueryのgetJSONを使ってJSONデータを簡単に取得・表示する方法

  /

Web開発において、サーバーからデータを取得して動的に表示することは非常に重要な技術です。
今回は、jQueryのgetJSONメソッドを使って、json形式のデータの配列情報を取得し、表示する方法について詳しく解説します。
わかりやすいように、具体的な例を交えながらステップバイステップで説明していきます。

Contents

jsonとは

まず、json（JavaScript Object Notation）について簡単に説明します。jsonは、データをキーと値のペアで表現する軽量なデータ交換フォーマットです。人間に読みやすく、かつ機械での解析や生成も容易なため、Web APIなどで広く使用されています。以下は、jsonの簡単な例です。

{
    "id": "01",
    "name": "東京太郎",
    "birthday": "1981/01/20"
}

　
このように、jsonはブラウザとサーバー間でデータをやり取りするための標準的なフォーマットとして利用されています。

getJSONとは

jQueryのgetJSONメソッドは、HTTP GETリクエストを使用してjsonデータを取得するための便利な関数です。このメソッドを使うことで、サーバーから取得したjsonデータを簡単に処理することができます。基本的な構文は以下の通りです。

$.getJSON(url, data, success);

  • url: jsonデータを取得するURL
  • data: サーバーに送信するデータ（オプション）
  • success: リクエストが成功したときに実行されるコールバック関数

次に、実際にjsonファイルを取得し、その内容を表示する具体的な例を見てみましょう。

配列情報を取得するjson形式のファイル

ここでは、json形式のファイル test.json を読み込みます。このファイルには、以下のようなデータが含まれています。

[{"id":"01","name":"東京太郎","birthday":"1981/01/20"},{"id":"02","name":"埼玉次郎","birthday":"1982/02/19"},{"id":"03","name":"千葉健太郎","birthday":"1983/03/18"},{"id":"04","name":"神奈川四郎","birthday":"1984/04/17"},{"id":"05","name":"山梨吾郎","birthday":"1985/05/16"},{"id":"06","name":"静岡六郎","birthday":"1986/06/15"},{"id":"07","name":"福岡七郎","birthday":"1987/07/14"}]

json形式の配列情報を取得表示するCSSの記述

表示する際のスタイルをCSSで定義します。以下のスタイルシートを使用して、データを見やすく整形します。

<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:800px;
	margin:0 auto;
}
#idJsonClk{
	cursor:pointer;
	margin:auto;
	width:150px;
	text-align:center;
	padding:15px;
	background-color:#666666;
	color:#FFFFFF;
	border:solid 1px #666666;
}
#idJsonClk:hover{
	cursor:pointer;
	margin:auto;
	width:150px;
	text-align:center;
	padding:15px;
	background-color:#FFFFFF;
	color:#000000;
	border:solid 1px #000000;
}
#idJsonArea{
	margin:auto;
	width:300px;
	border:dotted 1px #333333;
	padding:10px;
	line-height:1.2em;
}
p{
	padding:20px;
	font-size:14px;
	text-align:center;
}
-->
</style>

getJSONを使ってjson形式の配列情報を取得表示するJavaScriptの記述

次に、jQueryのgetJSONメソッドを使って、jsonファイルからデータを取得し、それを表示するためのJavaScriptコードを記述します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#idJsonClk").click(function(){

		var str_work="";

		$.getJSON("test.json", function(json){
			for(var i in json){
				//test.jsonファイルから取得した情報を連結
				str_work=str_work+json[i].id+","+json[i].name+","+json[i].birthday+"<br>";
			}
			$("#idJsonArea").html(str_work);
		});

	});
});
</script>

　
このコードは、ユーザーがボタン（#idJsonClk）をクリックしたときに、getJSONでjsonファイル（test.json）を取得し、その内容をHTML要素内に表示します。

getJSONを使ってjson形式の配列情報を取得表示するHTMLの記述

最後に、HTMLコードを記述します。以下のコードを使用して、jsonデータを表示するためのボタンと表示エリアを作成します。

<div id="idWrap">

<h1>以下をクリックするとjson形式のデータ（<a href="test.json" target="_blank">test.json</a>ファイル内）情報を取得表示します。</h1>

<div id="idJsonClk">ココをクリック</div>

<div id="idJsonArea">
		
ココに取得したjson形式のデータを表示します。
</div>

<!--/idJsonArea-->
</div>

getJSONでjson形式ファイルの配列情報を取得表示するデモ

最後に、実際のデモページを確認しましょう。以下のリンクをクリックすると、json形式ファイルの配列情報を取得表示するデモページにアクセスできます。

getJSONでjson形式ファイルの配列情報を取得表示するデモページ

まとめ

この記事では、jQueryのgetJSONメソッドを使ってjson形式のデータを取得し、表示する方法について説明しました。jsonとは何か、getJSONメソッドの使い方、具体的なjsonファイルの例、CSSやJavaScript、HTMLの記述方法を詳細に解説しました。これにより、簡単にサーバーからデータを取得して動的に表示する方法を学ぶことができます。ぜひ、実際のプロジェクトで活用してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

getJSON json 配列
関連記事