Skip to content

Instantly share code, notes, and snippets.

@motyar

motyar/json_template.html

Created December 15, 2011 09:13
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save motyar/1480462 to your computer and use it in GitHub Desktop.
Save motyar/1480462 to your computer and use it in GitHub Desktop.
Download ZIP
Displaying JSON values with JavaScript : Basics of JSON Template with JavaScript
Raw
json_template.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Displaying JSON values with JavaScript : Basics of JSON Templating with JavaScript</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<script>
function loadJSON(url){
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = url;
headID.appendChild(newScript);
}
function show(obj){
var elems = document.getElementsByTagName("span");
for(i=0; i<=elems.length; i++){
var bind = elems[i].getAttribute("data");
if(bind && obj[bind]){
elems[i].innerHTML = obj[bind];
}
}
}
loadJSON('https://graph.facebook.com/motyar&callback=show');
</script>
</head>
<body>
<p>ID: <span data="id"></span></p>
<p>Name: <span data="name"></span></p>
<p>link: <span data="link"></span></p>
<a href="" ></a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment