phated/10k-json-to-html.html

## 10k-json-to-html.html
<html>
<head>
  <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>-->
  <script src="https://raw.github.com/madrobby/zepto/master/src/zepto.js"></script>
  <!--<script src="http://download.dojotoolkit.org/release-1.7.1/dojo.js"></script>-->
  <script>
    $(document).ready(function(){
    //dojo.ready(function(){

      var generated = '{';
      for(var x = 0; x < 10000; x++) {
        if(x !== 9999) {
          generated += '"' + x + '":{"element":"p","content":"another test"},'
        } else {
          generated += '"' + x + '":{"element":"p","content":"another test"}'
        }
      }
      generated += '}';
      var template = JSON.parse(generated);

      var parentElement = '';
      var fragment = document.createDocumentFragment();

      function html(key, value) {
        if (key !== '') {
          var element = '';
          if(typeof(value) == 'string') {
            if(key == 'element') {
              element = document.createElement(value);
              if(parentElement == '') {
                parentElement = element;
                fragment.appendChild(parentElement);
              } else {
                parentElement.appendChild(element);
                parentElement = element;
              }
            } else if(key == 'content') {
              parentElement.innerHTML = value;
              parentElement = '';
            }
          }
        }
        return value;
      }

      var jsonString = JSON.stringify(template, html);
      console.log(jsonString);
      document.body.appendChild(fragment);
    });
  </script>
</head>
<body>

</body>
</html>
	<html>
	<head>
	<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>-->
	<script src="https://raw.github.com/madrobby/zepto/master/src/zepto.js"></script>
	<!--<script src="http://download.dojotoolkit.org/release-1.7.1/dojo.js"></script>-->
	<script>
	$(document).ready(function(){
	//dojo.ready(function(){

	var generated = '{';
	for(var x = 0; x < 10000; x++) {
	if(x !== 9999) {
	generated += '"' + x + '":{"element":"p","content":"another test"},'
	} else {
	generated += '"' + x + '":{"element":"p","content":"another test"}'
	}
	}
	generated += '}';
	var template = JSON.parse(generated);

	var parentElement = '';
	var fragment = document.createDocumentFragment();

	function html(key, value) {
	if (key !== '') {
	var element = '';
	if(typeof(value) == 'string') {
	if(key == 'element') {
	element = document.createElement(value);
	if(parentElement == '') {
	parentElement = element;
	fragment.appendChild(parentElement);
	} else {
	parentElement.appendChild(element);
	parentElement = element;
	}
	} else if(key == 'content') {
	parentElement.innerHTML = value;
	parentElement = '';
	}
	}
	}
	return value;
	}

	var jsonString = JSON.stringify(template, html);
	console.log(jsonString);
	document.body.appendChild(fragment);
	});
	</script>
	</head>
	<body>

	</body>
	</html>