#概要
文字列型JSONや、Objectを基にHtmlDomへ変換する、Javascript製の変換器です。
もともとAjaxで通信する際にJSONでデータだけ通信していたものを、HtmlDomごと通信して書き換えてしまおうという魂胆で生まれました。
JSONは本来軽量なデータ記述言語ですが、ガン無視ですw
でもこれでjavascript側でデータを受け取ってウェブページに反映するという作業ではなく、書き換え部分を全て消してからdomを挿入するという方法が取れる様になります。
(HtmlDomからJSON,Objectへの変換は使わないのでまだ未実装ですが、時間があればやってみたいかなと・・・)
##同じことをするPHP製の変換器も作りました
Qiita.com:JSON,ArrayをHtmlDomに変換するPHP製の変換器
#コード
以下がコードです。
適当にウェブページに埋め込んで、google chromeなどのconsoleで実行すると何をしているのかがわかります。
サンプルデータもあるので、試してみてください。
console.log(decoder.getJsonToHtmlString(jsondata_string));
decoder.js
var decoder = {};
decoder.getJsonToHtmlString = function(json_string) {
return decoder.getArrayToHtmlString(JSON.parse(json_string));
};
decoder.getArrayToHtmlString = function(dom_array) {
/*
* decoder.getArrayToHtmlString(dom_array)
*
* dom_arrayから、element, attribute, textを基にdomを生成、
* childrenが存在している場合再帰させ、dhildren要素を作成後にdomへ子要素として追加
*/
var getDomDomelement = function(dom_array) {
var element = null;
if ( typeof dom_array['element'] !== 'undefined') {
element = document.createElement(dom_array['element']);
if ( typeof dom_array['text'] !== 'undefined')
element.innerText = dom_array['text'];
if ( typeof dom_array['attribute'] !== 'undefined') {
for (var attributekey_string in dom_array['attribute']) {
var node = document.createAttribute(attributekey_string);
node.value = dom_array['attribute'][attributekey_string];
element.setAttributeNode(node);
}
}
if ( typeof dom_array['children'] !== 'undefined') {
if (Array.isArray(dom_array['children'])) {
for (var childelement_num in dom_array['children']) {
element.appendChild(arguments.callee(dom_array['children'][childelement_num]));
}
}
}
}
return element;
};
var main = function(dom_array) {
var root = document.createElement('root');
if (Array.isArray(dom_array)) {
for (var key in dom_array) {
root.appendChild(getDomDomelement(dom_array[key]));
}
}
return root;
};
return main(dom_array).innerHTML;
};
var jsondata_string = '[{"element":"div","attribute":{"id":"top","class":"text"},"children":[{"element":"div","attribute":{"class":"text","data-test_data":"test data !"},"children":[{"element":"p","text":"No.","children":[{"element":"b","text":"1"}]}]},{"element":"div","attribute":{"class":"text","data-test_data":"test data !!"},"children":[{"element":"p","text":"No.","children":[{"element":"b","text":"2"}]}]},{"element":"div","attribute":{"class":"text","data-test_data":"test data !!!"},"children":[{"element":"p","text":"No.","children":[{"element":"b","text":"3"}]}]}]},{"element":"p","attribute":{"id":"end"},"text":"JSON TO HTML SAMPLE"}]';
var jsondata_object = [{
"element" : "div",
"attribute" : {
"id" : "top",
"class" : "text"
},
"children" : [{
"element" : "div",
"attribute" : {
"class" : "text",
"data-test_data" : "test data !"
},
"children" : [{
"element" : "p",
"text" : "No.",
"children" : [{
"element" : "b",
"text" : "1"
}]
}]
}, {
"element" : "div",
"attribute" : {
"class" : "text",
"data-test_data" : "test data !!"
},
"children" : [{
"element" : "p",
"text" : "No.",
"children" : [{
"element" : "b",
"text" : "2"
}]
}]
}, {
"element" : "div",
"attribute" : {
"class" : "text",
"data-test_data" : "test data !!!"
},
"children" : [{
"element" : "p",
"text" : "No.",
"children" : [{
"element" : "b",
"text" : "3"
}]
}]
}]
}, {
"element" : "p",
"attribute" : {
"id" : "end"
},
"text" : "JSON TO HTML SAMPLE"
}];
##実行結果
<div id="top" class="text">
<div class="text" data-test_data="test data !">
<p>No.<b>1</b></p>
</div>
<div class="text" data-test_data="test data !!">
<p>No.<b>2</b></p>
</div>
<div class="text" data-test_data="test data !!!">
<p>No.<b>3</b></p>
</div>
</div><p id="end">JSON TO HTML SAMPLE</p>