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.
JQuery loadJSON plugin enables you to load array of JavaScript objects into the list.
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:
<ul> <li> <a href="details.html" class="ID"> <span class="Name"></span></a> <span class="Address"></span> </li> </ul>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.
[ { "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" } ]This array contains elements with properties ID, Name, and Address that will be bound to the elements in the HTML template.
$('li').loadJSON('list.js');