-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathhierarchy.html
154 lines (146 loc) · 6.89 KB
/
hierarchy.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Loading Hiearachical JSON objects</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="style.css" />
<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 src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../src/jquery.loadJSON.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('li').loadJSON('hierarchy.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 Hiearachical JSON objects</h1>
JQuery loadJSON plugin enables you to load hierachical JSON objects and generate hierarchical
structures of HTML elements based on the template. In the <a href="list.html">list</a> example
is shown how the array of the objects can be loaded into the template. In this example, array
of the objects is exdended so each object in the array have its own array as a property. As a re
<h2>
Live Example</h2>
In this example will be used extended template that can be used for complex objects. Example of
the resulting page is shown below:
<br />
<br />
<ul><h2>Companies</h2>
<li><a href="details.html" class="ID">
<span id="Name" class="Name"></span></a> <span
id="Address" class="Address"></span>
<h3>Manager:</h3>
<span class="Manager">
<span class="FirstName"></span> <span class="LastName"></span>
</span>
<h3>Employees:</h3>
<dl class="Employees">
<dt class="FirstName"></dt><dd class="LastName"></dd>
</dl>
</li>
</ul>
<p>In this example for each company in the list is shown one manager and nested list of all employees.
Details about implementation is described in the sections below.</p>
<br />
<h2>
Implementation</h2>
<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><h2>Companies</h2>
<li><a href="details.html" class="ID">
<span id="Name" class="Name"></span></a>
<span id="Address" class="Address"></span>
<h3>Manager:</h3>
<span class="Manager">
<span class="FirstName"></span> <span class="LastName"></span>
</span>
<h3>Employees:</h3>
<dl class="Employees">
<dt class="FirstName"></dt><dd class="LastName"></dd>
</dl>
</li>
</ul>
</pre>
<p>
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. Additionally, inside the LI element is placed
SPAN with class Manager where are placed two SPAN elements for manager's first name and last name,
and data list with class "Employees" where can be placed first and last name of employees.
<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:
</p>
<pre class="brush: js;">
[ { "ID": 17, "Name": "Emkay Entertainments", "Address": "Nobel House, Regent Centre", "Manager": { "FirstName": "John", "LastName": "Doe" }, "Employees": [ { "FirstName": "Brian", "LastName": "Hunt" }, { "FirstName": "Mick", "LastName": "Henning" } ] }, { "ID": 18, "Name": "The Empire", "Address": "Milton Keynes Leisure Plaza", "Manager": { "FirstName": "Ana", "LastName": "Johnsnon" }, "Employees": [ { "FirstName": "Erick", "LastName": "O'Neil" }, { "FirstName": "George", "LastName": "Halloway" } ] }
]
</pre>
<p>This array contains elements with properties ID, Name, and Address that will be
bound directly to the elements in the HTML template. Additionaly it has nested object
Manager with the FirstName and LastName properties, and nested array of Employees with
their own FirstName and LastName properties. JQuery loadJSON plugin generate nested list
Employees records inside each of the generated company records. This way is implemented
hierachical template for nested objects.
<br />
Template is defined in the LI HTML element, and under assumption that JSON
array is placed into the "hierarchy.js" file, the following code generates output HTML
using template and JSON array:
</p>
<pre class="brush: js;"> $('li').loadJSON('hierarchy.js');
</pre>
<p>As a results of this call will be generated output shown in the live example above.</p>
</div>
</div>
</body>
</html>