10
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2013-12-17

#概要
文字列型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>
10
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?