もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第19回 jQueryでAJAX入門:JSONを使いサイトにTwitterを表示

この記事を読むのに必要な時間:およそ 7 分

jQueryでAJAX入門2回目:JSON形式を扱う

前回はXML形式のRSSをAJAXで取得してリストで表示させました。今回はXMLではなく,JSON(ジェイソン)と呼ばれる形式を扱い,同じようにリストを表示させてみることにします。今回ご紹介するJSON形式も,前回紹介のXML形式同様jQueryで取得・表示をさせることができます

JSON?

JSONはJavaScript Object Notationの略で,JavaScriptで簡単に扱えるテキストベースのデータフォーマットです。たとえば下記のような構造になっています。

JSONサンプル

[
    {
        "name": "技評太郎",
        "age" : 26,
        "skills":["PHP" , "JavaScript"]
    },
    {
        "name": "長谷川広武",
        "age":25,
        "skills":["HTML" , "CSS"]
    },
    {
        "name": "徳田和規",
        "age":26,
        "skills":["JavaScript" , "jQuery"]
    }
]
  • オブジェクトは{}で全体を囲む
  • キーと値のペアはコロン(:)で区切る
  • 複数指定はカンマ(,)で区切る
  • キーには文字列のみ使用可能

JSONの例

JavaScriptのオブジェクトと配列の構造と同じですが,例を見てみましょう。

オブジェクト例

オブジェクト例

{
    "name" : "長谷川広武" ,
    "age" : 25
}

配列の例

配列の例

["JavaScript" , "jQuery" , "HTML" , "CSS"]

それでは早速先ほどのサンプルを表示させる簡単なサンプルを見てみましょう。

JSONをリストで表示させるサンプル

JSONは先ほどJSONサンプルを利用して,その中身をリストに入れて表示してみることにします。

$.getJSON()メソッド

JSON形式を取得する場合は,前回でも利用した$.ajax()メソッド利用でも実現可能なのですが,JSONでは,専用に$.getJSON()メソッドが用意されています。

$.getJSON("js/sample01.json",function(data){
    // ここに実行したい処理を書く
});

$.ajax()メソッドを使うよりも手続きが簡単です。

早速サンプルを見てみましょう。

jQuery(function(){
    $.getJSON("js/sample01.json",function(data){
        $('p','#demo').remove();
        $('#demo').append('<ul/>');
        $.each(data,function(i,items){
            $("<li/>",{
                text:'名前:'+items.name+' 年齢:'+items.age+' スキル:'+items.skills.join(',')
            }).appendTo('ul','#demo');
        });
    });
});

前回のXMLのサンプル時には,コード内でloading中の表示をさせましたが,今回はHTML側にloading中の画像をいれておき,$.getJSON()メソッドの最初で,その画像部分を.remove()メソッドで削除しています。その後,リストを表示させるためのUL要素を追加し,itemsごとにLI要素に入れてUL要素へ追加していくようにしました。

items中の複数の中身を一つのリスト中に入れてしまっているのですが,今回のサンプル用に簡易的に表示させたものです。

スキルだけ「.join(',')」を使っているのですが,これはスキルの項目のみ配列で複数中身があるので,それを一度に表示させるために中身を.join(',')で結合させているためです。

$.getJSON()を使わない場合

JSONデータはJavaScriptで簡単に扱えるようになっているデータでもあるので,$.getJSON()で利用せずとも,データの形によっては,HTMLのSctiptタグで読み込み利用する方法もあります。下記のように,変数として指定しておきます。

JSONサンプル

//変数とする
var jsonData = [
        {
            "name": "技評太郎",
            "age" : 26,
            "skills":["PHP" , "JavaScript"]
        },
        {
            "name": "長谷川広武",
            "age":25,
            "skills":["HTML" , "CSS"]
        },
        {
            "name": "徳田和規",
            "age":26,
            "skills":["JavaScript" , "jQuery"]
        }
    ]

上記のデータをScriptで読み込みます

<script type="text/javascript" src="js/sample02.json"></script>

これでデータを扱う準備ができたので,あとは通常通りコードで扱うだけです。

jQuery(function(){
        $('p','#demo').remove();    
        $('#demo').append('<ul/>');        
        $.each(jsonData,function(i,items){
            $("<li/>",{
                text:'名前:'+items.name+' 年齢:'+items.age+' スキル:'+items.skills.join(',')
            }).appendTo('ul','#demo');
            if ( i == 4 ) return false;
        });
});

この方法だと,$.getJSON()や$.ajax()を使わずとも表示が可能です。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

コメントの記入