The JSON2HTML JavaScript open source library provides us with a powerful templating system we can use to convert JSON objects into HTML.
The following code sample shows how simple it is to use this library for the purpose of converting data we hold in JSON objects into HTML.
<!DOCTYPE html>
<html>
<head>
<title>json2html demo</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="json2html.js"></script>
<script type="text/javascript" src="jquery.json2html.js"></script>
</head>
<body>
<script type="text/javascript">
var template = {'tag':'li','html':'${abbreviation} - ${explanation}'};
var data = [
{'abbreviation':'IMHO','explanation':'In My Humble Opinion'},
{'abbreviation':'FYI','explanation':'For Your Information'},
{'abbreviation':'CYE','explanation':'Check Your Email'},
{'abbreviation':'GIY','explanation':'Google It Yourself'},
{'abbreviation':'4YEO','explanation':'For Your Eyes Only'}
];
var str = json2html.transform(data,template);
document.write(str);
</script>
</body>
</html>
The followinb video clip overviews this code sample, shows its execution and explains each and every part of it.
You can find the entire code sample ready for download in my JSON2HTML course at http://abelski.lifemichael.com.
