トイレのうず

jQuery で容量の大きい JSON を配列に代入するときは注意!

当記事はアフィリエイト広告を掲載しています。

サーバーとクライアント(ブラウザ)のデータの受け渡しに、 JSON データを使うことにした。データが軽いし、 PHP 側でも JSON エンコードするだけだし、ブラウザ側の JavaScript のオブジェクトそのままだから扱いやすい。

でも、 jQuery の $.getJSON を使って JSON データを読み込もうとしてちょっとばかりはまったので、メモ的に残しておく。
→ StackTrace : $.getJSON(url, [data], [callback])


jQuery の $.getJSON は非常に簡単に扱いやすい関数なんだけれど、 JSON データ容量が大きい場合、 JSON データの読み込みを完了する前に、その後の処理が走り、思ったような結果が得られないことがある。ほとんどの場合は大丈夫なのだけれど、受け取った JSON データをループを使って配列に代入するときには注意が必要。

うまく配列の値が得られない原因は(当たり前だが)非同期通信をしているから。その後の処理で読み込んだ値を配列に代入して使いたい場合は、配列が null 値 をもって処理されるから困ったことになる。しかも、 Firefox の firebug でコンソールしているときは、きちんとした実行結果が得られるのに、 firebug の画面を閉じて実行すると、そのあとの処理がきちんとはたらかないから困ったもんです。( Safari, Chrome は思ったような動作をしてくれる動く。もしかして Firefox 特有の問題?)

そこで、登場するのが、 $.ajax という関数。 $.getJSON とかの関数の大元に当たる関数らしく、エラー処理とかいろいろできるらしいのだ。
→ StackTrace : $.ajax(options)

$.getJSON(
	"XXX.php",            // リクエストURL
	null,
	function(data, status) {    // 通信成功時にデータを表示
		for (i in data) {
			//JSON データの処理
		}
	}
);
//その後処理

XXX.php のデータサイズが大きい場合、その後の処理が先に走ってしまう場合は下記のように書き換えられる。

$.ajax({
	url: 'api/gmaker.php',
	dataType: 'json',
	success : function(data){
		for (i in data) {
			//JSON データの処理
		}
	},
	complete : function(){
		//その後の処理
	}
})

というように「 complete 」のあとに処理を書くと、 JSON データを読み込んだあとに処理を行ってくれるようです。忘れてしまいそうだから、メモ的に書いておきました。間違いまたはもっといい方法がありましたら、ご指摘ください。

参考リンク
→ Kinopyo ’ s Blog : jQuery で ajax :非同期通信時、実行順番を保障する方法

関連記事

丸パクリサイト metri.biz の挙動を検証
Web制作
thumbnail
Seesaa blog のタグクラウドが Windows IE から見たときに行間が狭くなる件
Web制作
Windows IEの元の表示
サイトを丸パクリされました。 metri.biz に注意!
Web制作
パクリサイトがトップ10にランクイン
ハッスルサーバーが PHP5 に対応する!
WordPressWeb制作
thumbnail
丸パクリサイト metri.biz の挙動を検証 その 2
Web制作
フッターにリンクが追加されている
WordPress でタイトルタグの重複を回避する
WordPressWeb制作
thumbnail