jquery-load-json
Version:
jQuery plugin that enables developers to load JSON data from the server and load JSON object into the DOM.
127 lines (94 loc) • 4.48 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Listing JSON aray using the HTML template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../src/jquery.loadJSON.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="scripts/shCoreDefault.css"/>
<link type="text/css" rel="stylesheet" href="scripts/shThemeDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('li').loadJSON('list.js');
});
</script>
</head>
<body>
<div id="page-wrap">
<a href="http://code.google.com/p/jquery-load-json/" alt="Home">Home</a>
<div id="contact-area">
<h1>Loading JSON in the list</h1>
JQuery loadJSON plugin enables you to load JSON array of objects and generate list of HTML elements based on the template.
For templating is not used any specific templating language - as a template is used basic HTML that will be linked to the JSON object using standard HTML attributes. This plugin binds JavaScript object properties with HTML elements in the template using id, class, name, or rel attributes.
<h2>Live Example</h2>
HTML generated using loadJSON plugin is shown below:
<br/>
<br/>
<ul>
<li>
<a href="details.html" class="ID"><span id="Name" class="Name"></span></a> <span id="Address" class="Address"></span></li>
</ul>
<br/>
<p>In this example array of JavaScript objects is used as a data source for the list of elements. Details about implementation
is described in the sections below.</p>
<br/>
<h2>Implementation</h2>
<p>JQuery loadJSON plugin enables you to load array of JavaScript objects into the list.
</p>
<p>
In the HTML should be placed one item that represents a template item that will be populated with elements from the JSON array. Example is shown below:
</p>
<pre class="brush: xml;"><ul>
<li>
<a href="details.html" class="ID">
<span class="Name"></span></a> <span class="Address"></span>
</li>
</ul></pre>
In this template are placed three elements where properties ID, Name, and Address of some JSON object will be populated. loadJSON plugin will take JSON array, bind properties of the elements of the array to template and replicate template item bound with each element in the array.
<br/>
Once HTML template item is prepared it is required to provide a JSON array that will be used to populate template item shown above. Example of JSON array used in this example is shown below:
<pre class="brush: js;">
[
{
"ID": 17,
"Name": "Emkay Entertainments",
"Address": "Nobel House, Regent Centre"
},
{
"ID": 18,
"Name": "The Empire",
"Address": "Milton Keynes Leisure Plaza"
},
{
"ID": 19,
"Name": "Asadul Ltd",
"Address": "Hophouse"
},
{
"ID": 20,
"Name": "Star Records",
"Address": "St Danny Street"
},
{
"ID": 21,
"Name": "Ashley Mark Publishing Company",
"Address": "1-2 Vance Court"
}
]
</pre>
This array contains elements with properties ID, Name, and Address that will be bound to the elements in the HTML template.
<br/>
When template and JSON are prepared they should be bound toghether in order to generate output. Template is defined in the LI HTML element, and under assumption that JSON array is placed into the "list.js" file, the following code generates output HTML using template and JSON array:
<pre class="brush: js;">
$('li').loadJSON('list.js');
</pre>
</p>
</div>
</div>
</body>
</html>