This post describes, how to display json data in an html file. This approach is simple, self explanatory and straight forward.

HTML (index.html):

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="content">
This div will display json data.
</div>
</body>

JSON Data file (event.json):

[
 {
 "eventName" : "event1",
 "comment" : "comment",
 "eventDate" : "2010/07/11"
 },
 {
 "eventName" : "event 2",
 "comment" : "comment",
 "eventDate" : "2013/07/11"
 },
 {
 "eventName" : "event 3",
 "comment" : "comment",
 "eventDate" : "2012/07/11"
 },
 {
 "eventName" : "event 4",
 "comment" : "comment",
 "eventDate" : "2011/07/11"
 }
]

Javascript (script.js):

function comp(a, b) {
 return new Date(b.eventDate).getTime() - new Date(a.eventDate).getTime();
}
$(document).ready(function () { // load json file using jquery ajax
 $.getJSON('event.json', function (data) {
 data.sort(comp);
 var output = '<div id="scrolllist"><ol>';
 $.each(data, function (key, val) {
 output += '<li>' + val.eventDate + '<p><em><b> ' + val.eventName + '</b></em>' + val.comment + '</p></li>';
 });
 output += '</ol></div>';
 $('#content').html(output); // replace all existing content
 });
});

The above function runs when html page gets loaded. ‘$.getJSON’ loads data from ‘event.json’ which has json array data i.e. a set of events. Then data is sorted according to date with sort function and user defined helper function a comparator ‘comp()’ defined above. At last the div with ‘content’ as id is used to display the data.

 CSS (for display) style.css:

#scrolllist { width:100%; }
#scrolllist ol { font-style:italic; font-family:Georgia, Times, serif; font-size:15px; color:#100001; margin-left:10px; }
#scrolllist ol li { }
#scrolllist ol li p { padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#113331; border-left: 3px solid #999; }
#scrolllist ol li p em { display:block; }

Result : 

Screen Shot 2013-12-24 at 10.37.35 PM