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について説明して行きたいと思います。
