jQueryでAJAX入門2回目：JSON形式を扱う
前回はXML形式のRSSをAJAXで取得してリストで表示させました。今回はXMLではなく、
JSON？
JSONはJavaScript Object Notationの略で、
[
{
"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形式を取得する場合は、
$.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のサンプル時には、
items中の複数の中身を一つのリスト中に入れてしまっているのですが、
スキルだけ
$.getJSON()を使わない場合
JSONデータはJavaScriptで簡単に扱えるようになっているデータでもあるので、
//変数とする
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;
});
});この方法だと、
Twitterの自分の発言をサイトに表示させる
ここまで、
Twitter APIの利用
今では日本でも多くの人が利用するようになったTwitterですが、
特定ユーザーの発言一覧
特定ユーザーの発言一覧を表示させるには、
http://twitter.com/statuses/user_timeline/h2ham.json?callback=?上記のURL中のh2hamとなっているところにユーザー名やユーザーIDを入れることで、
jQuery(function(){
$.getJSON("http://twitter.com/statuses/user_timeline/h2ham.json?callback=?",function(data){
$('p','#demo').remove();
$('#demo').append('<ul/>');
$.each(data,function(i,items){
$("<li/>",{
text:items.text
}).appendTo('ul','#demo');
if ( i == 4 ) return false;
});
});
});プラグイン化
Twitterをリストで表示する、
(function($){
$.fn.twLine = function(options){
var c = $.extend({
//ユーザーIDもしくはスクリーン名
user: null,
number: 10
},options || {});
$(this).each(function(){
var self = $(this);
// ユーザー名がなければ処理を終了する
if( !c.user ) {
return false;
}
// loading文字列とJSONの中身を一覧で表示するためのul要素を入れておく
self.append(
'<div class="loading"><img src="images/loading.gif" width="32" height="32" alt="" />loading...</div>',
'<ul/>'
);
// JSONの取得
$.getJSON('http://twitter.com/statuses/user_timeline/' + c.user +'.json?callback=?',function(data){
// loading文字列を消去
$('.loading', self).remove();
// ポストがひとつもなかった場合
if( data.length < 1 ) {
$('ul', self).append('<li>投稿がありません。</li>');
return false;
}
// item毎に・・・
$.each(data , function(i , items) {
// 指定した数を超えた場合は終了する
if( i > (c.number - 1) ) {
return false;
}
// itemの中のtextを抜き出してulに追加する
$('ul', self).append(
$('<li/>',{
text:items.text
})
);
});
});
});
}
})(jQuery);実行する場合は以下のように実行します。
jQuery(function($){
$('#demo').twLine({
user: '32262053'
});
$('#demo2').twLine({
user: 'h2ham',
number: 5
});
});今回は前回利用した書き方ではなく、
Twitterの投稿はうまく表示されましたでしょうか？