-
-
jQueryでJSONを扱う
お世話になっております、バイタリフィ加藤です！
最近jQueryで外部ファイルのJSONからデータを抜き出してコンテンツを吐き出したりなんだりしたのでその辺を書いてみます。
リハビリです。//javascript
var jsonDataUrl = "./modules/json/data,json";
$.getJSON(jsonDataUrl,function(json) {
successFunc(json);
return;
});以上です。
まじでー！
ということでjQuryでjsonを読み込むのが凄く楽なことがよくわかりました。
じゃぁついでなのでjsonの中身を呼び出して見ましょう。たとえばこんなjson
//json
{"title":"sample data","person":[
{"id":"1","nameFirst":"彰則","nameLast":"加藤","age":"24","birth":"1983-12-22"}
]}ここから誕生日を抜き出してみよう
//javascript
var successFunc = function(json) {
alert(json.person[0].birth);
};なんと、jsonの中身は全て$.getJSON関数で引っ張り出すと勝手にパースしてオブジェクトに格納してくれるのでたどるだけです。
これは楽チン！本当に説明することもないくらい手間が単純化されているんですが、「json」って聞いただけでなんだか敷居が高く感じてしまいますのでその印象はもったいないよ！というお話でした。
ついでに自分の誕生日もアピールできたのでこれで誰かが何かをくれることを期待しております。ということで、サンプルコードとサンプルページ置いておきます。
http://www.vfbox.com/staff_area/kato/blog/getJSON///javascript
$(function() {
var jsonDataUrl = "./module/json/sample.json";
//jsonを呼び出してコールバック関数へ注ぎ込む
$.getJSON(jsonDataUrl,function(json) {
//ボタンにイベントを
$("input#getMyBirth").click(function() {
//メッセージを入れるボックス生成
$(this).parent().after('<p id="result"></p>');
//nameLastをよびだし
var message = json.person[0].nameLast;
message += ' の誕生日は ';
//birthを呼び出し
message += json.person[0].birth;
message += ' です。おめでとうございます';
//メッセージを書き出し
$("p#result").html(message);
//formボタンの無効化
return false;
});
});
});誕生日が近い！
お疲れ様でした！
-
カロリー
-
幹部合宿
-
いちご牛乳プリンのキャラメル
かわいらしいパッケージに惹かれて、ついつい。
ごぶさたです、むかいだです。ひっそり隠れた部分にも「きゅん！」とします。
包み紙もホモちゃん(※牛乳プリンのキャラクター)なんですよ！あ、そうそう、
先日、友人と蜷川実花さんの
「地上の花、天上の色」展 を見に行きました。『さくらん』の映画監督をつとめたこともあってか、
最近ではかなり有名になったなぁ、と思います。東京オペラシティ自体も結構好きな建物で、
展示の仕方を見るのも結構好きです(出展者によって見せ方が違って)。
今回はクリスマスイルミネーションもあって、昼も夜も楽しめました。明日は人生初のアイススケートなのでいまからどきどきです。
転んだりして見学にならないといいなぁ…。
-
チャンピオン
