Yahoo! UI Library3（YUI3）データ処理に着目

Yahoo! UI Library Ver.3 を使ってみよう（5）

JSONに関する処理

　JSONに関するサポートを行うモジュールjsonの説明を行います。モジュールdatasourceで読み込んだデータをページ内で加工するのに便利なモジュールです。以下、JSONデータを読み込んで、フィールド名nameのデータを表示する例題です。

［リスト11］モジュールjsonの例題（JSON1.html）

YUI().use("json","node", function (Y) {

    var jsonString = '{"Student":['+
        '{"id":111,"name":"赤坂","sei":"男性"},'+
        '{"id":222,"name":"池田","sei":"女性"},'+
        '{"id":333,"name":"上野","sei":"男性"},'+
        '{"id":444,"name":"岡田","sei":"女性"}'+
    ']}';

    var data = Y.JSON.parse(jsonString);  //（1）

    Y.one('#button').on("click",  function(e) {
        alert(data.Student.length );  //（2）
        for (var i =0;i< data.Student.length;i++) {
            var p = data.Student[i];
            alert(p.name);  //（3）
        }
    });
});
</script>

　読み込むデータはJSONフォーマットの文字列です。（1）のY.JSON.parse()で読み込みます。data.Student.lengthは件数を示します。おのおののデータはdata.Student[i]で読み込んでいます。

　リスト12に示すJSONデータの場合はY.JSON.stringify()を使用して文字列に変換します。

［リスト12］文字列変換（JSON2.html）

    var myData ={
        "Student":[
            {"id":111,"name":"赤坂","sei":"男性"},
            {"id":222,"name":"池田","sei":"女性"},
            {"id":333,"name":"上野","sei":"男性"},
            {"id":444,"name":"岡田","sei":"女性"}
        ]
    };

    var jsonString=Y.JSON.stringify(myData);  //（1）
    var data = Y.JSON.parse(jsonString);

　（1）で文字列に変換します。変換した文字列をY.JSON.parsen()で変数dataに読み込むと、data.Student[i]などが使用できるようになります。

まとめ

　データ処理に関するモジュールをみてきました。次は、ページ作成時に便利なツールをまとめたDeveloper Tools／Yahoo!が進めているJavaScriptをベースとして作成されている、小さくて便利なプログラムのサポートを行うWidgetsについて説明して行きたいと思います。