json

json

Json形式

JavaScript のリテラル表記(配列)に近い形で、文字列として表現したものが、JSON 形式です。
空白、タブ、改行などの整形用の文字は、自由に挿入する事ができます。ファイルの拡張子は .jsonとします。

下記の構文をエディタに記載をして.json形式で保存をすれば、jsonファイルの出来上がりです。

[ true , false , 0 , 1 , 2 , 0.345 , "あ" , "い" ]

インターネット上での通信、たとえば、自分のサイトに、他サイトのRSSフィードで配信されている新着情報を載せたりする場合、多くは、このjson形式のファイルまたはxml形式のファイルを受信して、JavaScriptなどのプログラムで整形をして表示させています。他にも使い道はいろいろありますので、この機会に触れてみましょう。

オブジェクト形式のjsonファイル

{ "a":true , "b":false , "c":0 , "d":1 , "e":2 , "f":0.345 , "g":"あ" , "h":"い" }
//先ほど学習したオブジェクトとかわりませんね。

配列とオブジェクトの組み合わせを JSON で表現

{
	"aaa":{
		"count":123,
		"name":"テスト１",
		"result":false
	},
	"bbb":{
		"count":456,
		"name":"テスト２",
		"result":true
	},
	"ccc":{
		"count":789,
		"name":"テスト３",
		"param":{
			"ary":["a","b","c"],
			"name":"テスト４"
		},
		"result":true
	}
}
//　aaa bbb ccc という三つのキーがあります。
// それぞれのキーさらに、count name result　といったキーを持つオブジェクトがあります。
//さらに、cccのプロパティのキーparamにはarayとnameといったキーを持つオブジェクトが存在しています。
////そしてaryキーの値は配列になっており[a,b,c]の値が格納されています。
                  	                      	                       	               
//いずれのjsonデータも便宜上見やすくするために、インデントや空白などを使用していますが、実際に作成する場合は、空白、タブなどは使用しません。

練習問題

  • rider_name unmask finisher
    first takeshi_hongou rider_kick
    second hayato_ichimonzi rider_kick
    v3 shiro_kazami v3_kick

    上記の表をjson形式で表現してjsonファイルを作ってください。（保存場所はhtmlファイルと同階層）

getJsonメソッド

注意

jsonの難点

同一のドメイン内でしか読み込めない規制があります。今回はローカルでの実装となっているので問題はないのですが、実際には他のサーバにあるデータを取得することを主に使おうと考えるはずです。
そこで登場したのがjsonpとういう形式です。詳しくは、http://kinformationtechnology.hatenablog.com/entry/2013/12/19/021937　や、http://www.atmarkit.co.jp/ait/articles/0910/14/news117.html　などを参考にしてみください。　他、検索キーワード→　クロスドメイン　クロスサイトスクリプティング　

ローカル環境なのにjsonが読み込めない問題がクロームでおきています（ファイヤーフォックスとIEは読み込めます）。対策は→http://t.vowshe.info/jq/json_3/　こちらで確認してください。

練習問題

  • 先ほど作成したrider.jsonファイルをgetJSONメソッドを使用して取得してみましよう。 

  • //getJSONメソッドの一例　http://t.vowshe.info/jq/json_2/　にサンプルがあります。下記はそのファイル内のgetJSONメソッドのみを解説しています。                               
 var url = //jsonファイルの指定;
    $.getJSON(url, function(data//コールバック関数用の引数、この引数にjsonデータが格納されます。){
      for(var key in data){
        $('#static_result').append($('
    ').html(key +': '+ data[key]));
        // for in　文は　配列やデータ構造の要素分だけループして処理を行います。　配列やオブジェクトなどが入れ子になっている場合は適宜　for in 文も入れ子にする必要があります。
      }
    });
  • 中の人 仮面ライダー 必殺技

    取得したjson形式の配列を上記のようなテーブル形式の中に適宜追加しまししょう。

aJaxいろいろ おまけ

jsonのほかにXML

json形式の他によくつかわれるものとしてxml形式があります。


	
		test1
		mens
	
	
		test2
		mens
	
	
		test3
		ladys
	

このようにタグをつけて構造化する表現です。

もちろん、この形式もjQueryのメソッドで取得してブラウザに表示させるための整形を行うことができます。

	$.ajax({
		url:"ファイルパス（名）",
		type:"get",
		dataType:"ファイル形式(今回はxml)",
		timeout:1000,
		cache:false,
		error:function(){
			alert("xmlファイルの読み込み失敗");
			},
		success:function(xml){//読み込みを成功した場合の処理=》パラメータにxmlデータが格納されていくので、あとはそのパラメータをいかに処理するかです。
			var listdata="";
			$(xml).find("list").each(function(){
				//
				var title=$(this).find("title").text();
				//
				var name=$(this).find("title").attr("name");
				//
				var gen=$(this).find("gender").text();
				//
				alert(name);
				listdata+="
"+title+" : "+gen+" : "+name+"
";
				});
			$("#res").html(listdata);
			}
		});

$.ajaxメソッドはとても便利で前述のjsonやjsonpも読み込みが可能でほかにscriptやhtmlも読み込むことが出来ます。

練習問題

先ほどのjson形式で作成したrider.jsonファイルをxml形式に変更したのち、$.ajaxメソッドを使用して先ほどの演習と同じようにブラウザに表示させてみましょう。

上へ