JSON,ObjectをHtmlDomに変換するJavaScript製の変換器

概要

文字列型JSONや、Objectを基にHtmlDomへ変換する、Javascript製の変換器です。
もともとAjaxで通信する際にJSONでデータだけ通信していたものを、HtmlDomごと通信して書き換えてしまおうという魂胆で生まれました。
JSONは本来軽量なデータ記述言語ですが、ガン無視ですｗ
でもこれで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>