ブログBlog

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;
    });
  });
});