Home
Back to the list

Displaying details about the single JSON object

Live example

JQuery loadJSON plugin enables you to bind a single object to the HTML template. This litterally represent loading JSON object into the HTML code. In the example below is shown how a single JSON object is bound to the static HTML code:











Implementation

HTML template that will be populated with JSON object should be defined first. HTML elements in this template should have id attributes that match properties of the JSON object that will be loaded into the HTML code. Example of the plain HTML code that can be used as a template is shown below:

        <div id="data">
            <h1 id="Name"></h1>
		
            <label for="Address">Address:</label>
            <span id="Address"></span>
		
            <label for="Contact">Contact by:</label>
            <span id="Contact"></span>

            <label for="Town">Town</label>
            <span id="Town"></span>

            <form action="edit.html" method="get">
               <input type="hidden" id="ID" />
               <input type="submit" value="Edit" class="submit-button"/>
            </form>
        </div>
        

JSON object that will be loaded into the HTML code shown above should have properties that matches id attributes of the elements above. Example of such kind of JSON object is shown below:

        data = {
                    "ID":17,
                    "Name":"Emkay Entertainments",
                    "Address":"Nobel House, Regent Centre",
                    "Town":"Lothian",
                    "Contact":"Phone"
        }        
        

JSON object 'data' is bound to the HTML code within the DIV tag with an id "data" using the following line:

        $('div#data').loadJSON(data);
        

JQuery loadJSON plugin will take JSON object (data) and put properties of the object as a content of the HTML elements where ids of the elements match the names of the fields in the JSON object.

Back to the list