jQueryのgetJSONを使ってjson形式のデータの配列情報を取得表示する方法をご紹介します。
Contents
配列情報を取得する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>
getJSONでjson形式ファイルの配列情報を取得表示するデモ
getJSONでjson形式ファイルの配列情報を取得表示するデモページ
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告