getJSONを使ってjson形式の配列情報を取得表示する方法【jQuery】｜DAD UNION

jQueryのgetJSONを使ってjson形式のデータの配列情報を取得表示する方法をご紹介します。

Contents

配列情報を取得するjson形式のファイル
json形式の配列情報を取得表示するCSSの記述
getJSONを使ってjson形式の配列情報を取得表示するJavaScriptの記述
getJSONを使ってjson形式の配列情報を取得表示するHTMLの記述
getJSONで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の記述

※以下は重要では無いので必要に応じて調整して下さい。

<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の記述

※#idJsonClkをクリックするとgetJSONでjsonファイル（test.json）を読み込みます。

<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>

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

<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>