5行で書ける、jQueryを使ったJSONテンプレートプラグイン

More than 1 year has passed since last update.

Ajaxで受け取ったJSONを表示するために、簡単テンプレートプラグインの書き方。


jQueryプラグインを書く


プラグインを記述

$.fn.jsonAllocator = function(json){

for(name in json) {
this.find('[data-name="' + name + '"]').html(json[name]);
}
}

これだけ。


使い方


JSONデータの例

次のようなJSONデータを受け取り、titleauthor の内容をHTML中に表示したいとする。


受け取るJSON

{

"title":"SLAM DUNK",
"author":"井上雄彦"
}


HTMLにdata-name属性を記述

HTML側ではデータを表示したい要素にdata-name属性を記述し、JSONデータのキー名を指定する。


HTML

<section id="disp-section">

<h1 data-name="title">タイトル</h1>
<p data-name="author">作者名</p>
</section>

ちなみに、data-*** はHTML5のカスタムデータ属性なので、data-nameという属性名が何かと被って使えない時は好きな名前に変えてOK。

要素の中は空でもいいんだけど、デザイナーが作業する時に確認しやすいので、ウチではテキストを入れておく事が多い。


Ajaxを実行


使用時


// Ajax で受け取ったJSONを、#disp-section の内部で表示
$.ajax(option).
done(function(json, status, jqXHR) {
$('#disp-section').jsonAllocator(json);
}).
fail(function(jqXHR, status) {
....
});

これで、AjaxでJSONを受け取ると、#disp-section要素の表示を書き換えてくれる。


もうちょっと便利に

実際には form と合わせて使うことが多いので、<input name="title"> にも対応できるように書いている。


inputにも対応版

$.fn.jsonAllocator = function(json){

for(name in json) {
this.find('[data-name="' + name + '"]').html(json[name]);

// input にも対応
var selector = 'input[type!="radio"][name="' + name + '"]input[type!="checkbox"][name="' + name + '"]';
this.find(selector).val(json[name]);
}
}


こうしておくと、 data-name="title" だけでなく、<input name="title">もJSONの内容で置き換えてくれる。

ラジオボタンとチェックボックスはvalue値を書き換えてしまうとマズいので省いている。

ここに、ラジオボタンなどの選択式要素にも対応したり、href や src などの属性値の書き換えにも対応できるようにしたりと、お好みで拡張して使うのが吉。


実際に、この方法で表示しているサイト

拙作のサイトでもこの手法を使っております。

よろしければチェックしてみてください。

「超波動式マンガ紹介所」

http://bm.tashinoso.xyz/

その人の「好み」に合わせた、面白マンガを紹介するサービスです。