adiakritos/json.html

## json.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JSON</title>
  <style type="text/css">
      .widget {
          border:1px solid black;
          width:300px;
          height:200px;
      }
  </style>
</head>
<body>
  <div class="container">

  </div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
  (function(){

       var user = { "createdAt": "2013-12-29T05:32:48.557Z",
                    "skill_queue": { "52bfa586c3e90b8208b21dbe": 1388698915 },
                    "skills": { "52bfa579c3e90b8208b21dbd": 5,
                               "52bfa586c3e90b8208b21dbe": 1 },
                    "updatedAt": "2014-01-02T21:38:55.611Z",
                    "username": "test2",
                    "id": "52bfb400cf084d560be4d919" };

        $('.container').append("<div class='widget'></div>");
        $('.widget').addClass("user-" + user.id)

        function create_field_element(element_type, text_value, object_attr){
            var username_p = document.createElement(element_type);
            var username   = document.createTextNode(text_value + object_attr);
            return username_p.appendChild(username);
        }

        function insert_elements_from(array_of_elements) {
            console.log("hi");
            for (var i=0; i < array_of_elements.length; i++){
                $('.widget').append(array_of_elements[i]);
                $('.widget').append("<br>");
            }
        }

        username    = create_field_element("p", "Username: ", user.username);
        skill_queue = create_field_element("p", "Skill Queue: ", user.skill_queue);
        skill1      = create_field_element("p", "Skill 1: ", user.skills);
        skill2      = create_field_element("p", "Skill 2: ", user.skills);
        updatedAt   = create_field_element("p", "updatedAt: ", user.updatedAt);
        createdAt   = create_field_element("p", "createdAt: ", user.createdAt);
        id          = create_field_element("p", "id: ", user.id);

        var attrs = new Array();
            attrs[0] = username;
            attrs[1] = skill_queue;
            attrs[2] = skill1;
            attrs[3] = skill2;
            attrs[4] = updatedAt;
            attrs[5] = createdAt;
            attrs[6] = id;

        insert_elements_from(attrs);

   })();

</script>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>JSON</title>
	<style type="text/css">
	.widget {
	border:1px solid black;
	width:300px;
	height:200px;
	}
	</style>
	</head>
	<body>
	<div class="container">

	</div>
	</body>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
	(function(){

	var user = { "createdAt": "2013-12-29T05:32:48.557Z",
	"skill_queue": { "52bfa586c3e90b8208b21dbe": 1388698915 },
	"skills": { "52bfa579c3e90b8208b21dbd": 5,
	"52bfa586c3e90b8208b21dbe": 1 },
	"updatedAt": "2014-01-02T21:38:55.611Z",
	"username": "test2",
	"id": "52bfb400cf084d560be4d919" };

	$('.container').append("<div class='widget'></div>");
	$('.widget').addClass("user-" + user.id)

	function create_field_element(element_type, text_value, object_attr){
	var username_p = document.createElement(element_type);
	var username = document.createTextNode(text_value + object_attr);
	return username_p.appendChild(username);
	}

	function insert_elements_from(array_of_elements) {
	console.log("hi");
	for (var i=0; i < array_of_elements.length; i++){
	$('.widget').append(array_of_elements[i]);
	$('.widget').append("<br>");
	}
	}

	username = create_field_element("p", "Username: ", user.username);
	skill_queue = create_field_element("p", "Skill Queue: ", user.skill_queue);
	skill1 = create_field_element("p", "Skill 1: ", user.skills);
	skill2 = create_field_element("p", "Skill 2: ", user.skills);
	updatedAt = create_field_element("p", "updatedAt: ", user.updatedAt);
	createdAt = create_field_element("p", "createdAt: ", user.createdAt);
	id = create_field_element("p", "id: ", user.id);

	var attrs = new Array();
	attrs[0] = username;
	attrs[1] = skill_queue;
	attrs[2] = skill1;
	attrs[3] = skill2;
	attrs[4] = updatedAt;
	attrs[5] = createdAt;
	attrs[6] = id;

	insert_elements_from(attrs);

	})();

	</script>
	</html>