Javascriptだけで、複数のjsonを読み込んで時系列に並べ替えて出力したりしてみる話

Pocket
[`evernote` not found]

ブログのタイトルって、難しいですよね。毎回悩みます。
さんざん悩んだ結果がこれだったりすると、悲しくなってきます。

はい、本題へ。ブログなどの外部jsonファイルを読み込んで表示する方法はいろいろあります。
そんな時に複数の情報をまとめてよって、オーダーがきたらどうしますか?
phpとか使える人はバックエンドで処理したりできるんでしょうが、大人の事情でそれもできなかったり、いやそもそも僕はphpわからないけど、という場合、java scriptで対応するしかありません。なかば、強引な理論で、今日はその辺のテクニックのご紹介をば。

実際のデモを先にご覧いただくと、こんな感じ。

複数のブログ更新情報を持ってきて時系列に並べ替えるデモ

APIを扱いやすかったので、うちの会社で運営しているブログを引っ張ってきました。
(自分のあまり更新しなくなったブログと、開発者様のブログのフィードを勝手に拝借しています。)
複数のブログからjsonpを読み込んでひとまとめにして表示しています。
どんな事をしているかというと…

読み込まれたデータを格納するためのグローバル変数を用意して
それぞれのjsonを拾ってきて、グローバル変数の中に配列としてぶち込む。
通信が終わったら、配列として用意されたデータを日付でソートして
htmlとして出力する。

って感じです。

ここで、ポイントとなるのが、jsonを読み込んだ後の処理です。
ご存知の通り、jsonの読み込みは非同期で行われるので、そのことを念頭において処理しないと
jsonの読み込みが終わっていない状態で日付のソート処理を走らせると当然、ソートすべき情報がないので、何も表示されなくなってしまいます。

通信が終わった後に処理をするという形にしなければなりません。
どうやって?

$.Deferredの登場

これを使うと、一定の処理を行った後に次の処理を行うという順番付けができるようになります。
えっと、詳しくは、下記のサイトを参考にしてください。

jQuery.Deferredって何 – Takazudo hamalog
爆速でわかるjQuery.Deferred超入門 – Yahoo! JAPAN Tech Blog

残念ながら、説明するだけの知識はもっておりません。

一応、コードを晒しておきます。


$(document).ready(function() {
//拾ってきた情報を入れるグローバル変数
var feedsAllItem = [];

  //feedを拾ってくる関数 その1
function getFeed01() {
var dfd =$.Deferred();
$.ajax({
url:’http://www.matsuaz.com/4_1/json.js?max=8&full=true’,
cache:true,
dataType:”jsonp”,
}).then(function(json){
for (var i = 0; i < json.item.length; i++) { feedsAllItem.push({ title: json.item[i].title, link: json.item[i].link, postDate: json.item[i].date }) }; dfd.resolve(json); },function(){ dfd.reject('半人前ブログの取得に失敗しました'); }); return dfd.promise(); };   //feedを拾ってくる関数 その2 function getFeed02() { var dfd =$.Deferred(); $.ajax({ url:'http://www.matsuaz.com/matsumotojs/json.js?max=8&full=true', cache:true, dataType:"jsonp", }).then(function(json){ for (var i = 0; i < json.item.length; i++) { feedsAllItem.push({ title: json.item[i].title, link: json.item[i].link, postDate: json.item[i].date }) }; dfd.resolve(json); },function(){ dfd.reject('Matsumoto.jsの取得に失敗しました'); }); return dfd.promise(); };   //それぞれのFeedを読み込んでから、日付でソートして、HTMLの出力をする $.when( getFeed01(), getFeed02()) .done(function(){ feedsAllItem.sort(function(a, b){ return ( a.postDate < b.postDate ? 1 : -1); }); for (var i=0; (i<10);i++) { var postedata = [{ link: feedsAllItem[i].link, postDate: feedsAllItem[i].postDate title: feedsAllItem[i].title }];   //出力するときは、handlebars.jsにお世話になっております。 var template = Handlebars.compile( $('#template').text() ); $('#feed').append( template(postedata) ); } }); }); [/javascript] で、結局なにが言いたいかというと ajaxは、割とよく使われるんですが、ついでに$.Deferredも少し覚えると、読み込んだ後に加工したり、というのが簡単にできるようになります。それって表現の幅が広がるという事で、とてもハッピーなことですよね。 クライアントにできません!っていわなくても済むし。(これ実話) そんな訳で、ちょっと背伸びした記事でしたが、参考になれば… というか、個人的にこの手の処理はすごく使うので、とても勉強になりましたです。はい。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。