複数のjsonファイルを取得して色々処理する方法を調べる機会があったのですが、jQueryのwhen()がとても便利そうだったので使ってみました。
サンプルコード
今回サンプルで使用するjsonファイルです。
sample01.json / sample02.json
sample01.jsonのデータを使って、sample02.jspnのデータから必要なものを抽出して表示してみます。
HTML
<ul id="cast"></ul>
jsonデータを処理して、ここに結果を出力する想定です。
JavaScript
$(function() {
// jsonデータの格納場所
var data01, data02;
// jsonデータの取得
var getJson = $.when (
$.ajax({
type : 'GET',
url: 'sample01.json',
dataType: 'json',
success: function(data01) {}
}),
$.ajax({
type : 'GET',
url: 'sample02.json',
dataType: 'json',
success: function(data02) {}
})
);
// jsonデータ取得後の処理
getJson.done(function(data01, data02) {
var target = data01[0]['data'];
var insert = '';
for(var i = 0; i < data02[0][target].length; i++) {
insert += '<li>' + data02[0][target][i]['name'] + '<span>CV:' + data02[0][target][i]['actor'] + '</span></li>';
}
$('#cast').append(insert);
});
// 何らかの原因で取得失敗した場合
getJson.fail(function(data01, data02) {
alert('error');
});
});
今回紹介したい個所だけ抜き出すと以下になります。
$(function() {
var hoge = $.when (
// 行いたい処理内容
);
hoge = $.done (function() {
// when()の処理終了後に行う処理内容
});
hoge = $.fail (function() {
// when()の処理が失敗したときに行う処理内容
});
});
【参考サイト】
コメントが承認されるまで時間がかかります。