jQuery.ajaxでJSONがnullの場合の処理
jsonファイルの読み込みの際にnullが帰ってきた場合のみ表示させないようにしたいのですが、なかなかうまくできません。
以下コードになります。
time.json
{
"fromTokyo" : {"air" : "1 hour 30 min", "train" : null, "bus" : null},
"fromOsaka" : {"air" : "1 hour 45 min", "train" : null, "bus" : null},
"fromFukuoka" : {"air" : "2 hour 10 min", "train" : null, "bus" : null}}
index.html
$(function() {
$('#hoge').click(function(){
$.ajax( {
url: 'time.json',
dataType : 'json',
success: function( data ) {
var message = fromTokyo(data) + '</br>';
message = message + fromOsaka(data) + '</br>';
message = message + fromFukuoka(data);
$( '#fuga' ).html( message );
},
error: function( data ) {
$( '#fuga' ).html( '<font color="red">something went wrong.</font>' );
}
});
}
);
});
function fromTokyo(json) {
var tokyo = "<b>From Tokyo</b>" + '</br>';
tokyo = tokyo + 'Airplane : ' + json.fromTokyo.air + '</br>';
tokyo = tokyo + 'Train : ' + json.fromTokyo.train + '</br>';
tokyo = tokyo + 'Bus : ' + json.fromTokyo.bus + '</br>';
return tokyo;
}// 以下fromOsaka,fromFukuoka同じ関数
出力結果
From Tokyo
Airplane : 1 hour 30 min
Train : null
Bus : null
From Osaka
Airplane : 1 hour 45 min
Train : null
Bus : null
From Fukuoka
Airplane : 2 hour 10 min
Train : null
Bus : null
ここでnullを持つデータは吐き出さずに、
From Tokyo
Airplane : 1 hour 30 min
From Osaka
Airplane : 1 hour 45 min
From Fukuoka
Airplane : 2 hour 10 min
のようにしたいです。
ご教授宜しくお願いいたします。
*追記*
さらに発展させてみたく追記させていただきます。
日本地図をクリックして各都道府県のattr
とマッチするデータを取得する事は可能でしょうか?
例えば<p class="hokkaido" title="hokkaido">北海道</p>
をクリックして北海道へのアクセス時間のデータを以下のjsonから取得する形になります。
{
"hokkaido" : {
"Tokyo" : {"air" : "1 hour 30 min", "train" : null, "bus" : null},
"Osaka" : {"air" : "1 hour 45 min", "train" : null, "bus" : null},
"Fukuoka" : {"air" : "2 hour 10 min", "train" : null, "bus" : null}
},
"aomori" : {
"Tokyo" : {"air" : "1 hour 20 min", "train" : "3 hour 20 min", "bus" : null},
"Osaka" : {"air" : null, "train" : null, "bus" : null},
"Fukuoka" : {"air" : null, "train" : null, "bus" : null}
},
"iwate" : {
"Tokyo" : {"air" : null, "train" : "2 hour 20 min", "bus" : "7 hour 25 min"},
"Osaka" : {"air" : null, "train" : null, "bus" : null},
"Fukuoka" : {"air" : null, "train" : null, "bus" : null}
},
"miyagi" : {
"Tokyo" : {"air" : null, "train" : "1 hour 36 min", "bus" : "5 hour 27 min"},
"Osaka" : {"air" : null, "train" : null, "bus" : null},
"Fukuoka" : {"air" : null, "train" : null, "bus" : null}
} }