April 9, 2013

664 Views

JSON: Integration Method of JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange text format. It is easy for machines to parse and generate, and for humans, it is very easy to read and write.

 

JSON is a text format that is completely language-independent, but uses conventions that are familiar to C-family language programmers, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. 

 

How to call the JSON file in an HTML file and render in the browser

 

We are integrating the JSON data object in the HTML file and rendering it in the browser. To do this, follow these simple steps:

 

Step 1: Create a simple HTML file with the latest Jquery :

 

Create a simple HTML file and load the latest Jquery library with the document.

 

<!DOCTYPE html>

<html xmlns=" http://www.w3.org/1999/xhtml ">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Request json test</title>

<script src="http://code.jquery.com/jquery-1.5.js"></script>

<script src="json-jquery.js" type="text/javascript"></script>

</head>

<body>

<table cellpadding="6" id="alertTable">

<thead>

<tr bgcolor="#0A2F41" style="color:#fff">

<td>Alert ID</td>

<td>Description</td>

<td>Current Time</td>

<td>12:00 AM</td>

<td>11:00 AM</td>

<td>11:00 AM</td>

<td>11:00 AM</td>

<td>11:00 AM</td>

<td>11:00 AM</td>

<td>11:00 AM</td>

<td>11:00 AM</td>

<td>11:00 AM</td>

</tr>

</thead>

<tbody></tbody>

</table>

</body>

</html>

 

Step 2: Create the JOSN data to be rendered:

 

Create JOSN Data file using your any text editor by saving with ext. of .json (assuming you have basic knowledge of the JSOnN data format). I have created a JSON data object to render in three rows of the table below, and it can be of any size. Now each set of data represents the data which we are going to render in the table row.

 

Sample JSON Data Object

 

[{ "alertId":  "ORAEST006",

"description": "Streams Error in tucson..[ 5min ]",

"alerts":[

{"time":"Current", "value":"2"},

{"time":"12.00AM", "value":"4"},

{"time":"11.55AM", "value":"3"},

{"time":"11.50AM", "value":"3"},

{"time":"11.45AM", "value":"5"},

{"time":"11.40AM", "value":"1"},

{"time":"11.35AM", "value":"2"},

{"time":"11.30AM", "value":"3"},

{"time":"11.25AM", "value":"3"},

{"time":"11.20AM", "value":"4"}

  ]

},

{

"alertId":  "ORAEST006",

"description": "Streams Error in tucson..[ 5min ]",

"alerts":[

{"time":"Current", "value":"2"},

{"time":"12.00AM", "value":"4"},

{"time":"11.55AM", "value":"3"},

{"time":"11.50AM", "value":"3"},

{"time":"11.45AM", "value":"5"},

{"time":"11.40AM", "value":"1"},

{"time":"11.35AM", "value":"2"},

{"time":"11.30AM", "value":"3"},

{"time":"11.25AM", "value":"3"},

{"time":"11.20AM", "value":"4"}

  ]

},

{

  "alertId":  "ORAEST006",

  "description": "Streams Error in tucson..[ 5min ]",

  "alerts":[

{"time":"Current", "value":"2"},

{"time":"12.00AM", "value":"4"},

{"time":"11.55AM", "value":"3"},

{"time":"11.50AM", "value":"3"},

{"time":"11.45AM", "value":"5"},

{"time":"11.40AM", "value":"1"},

{"time":"11.35AM", "value":"2"},

{"time":"11.30AM", "value":"3"},

{"time":"11.25AM", "value":"3"},

{"time":"11.20AM", "value":"4"}

  ]

}

]

 

Step 3:  Parse the JSON object with the Jquery

 

Now we have created a Jquery function which will call the JSON file using the get method. You create a new .JS file, say json-jquery.js, and load it in your HTML page with the <script> tag.

 

  •  

    Ref. step-1 for clarification where json-jquery.js external file has been loaded

  •  

    Copy and save the code below in the json-jquery.js file

 

Jquery JSON parser code is:

 

$(document).ready(function(){

$.getJSON('json-data.json', function(data) {       

var alerts=data;

for(var i=0;i<alerts.length;i++){

var obj=alerts[i];

var html='<tr>';

html+='<td>'+ obj.alertId+'</td>';

html+='<td>'+ obj.description+'</td>';

for(var j=0;j<obj.alerts.length;j++){

html+='<td>'+ obj.alerts[j].value+'</td>';

}

html+='</tr>';

$('#alertTable tbody').append(html);

}

});

});

 

Step 4:

Reload your HTML page and see the output table. The final output below is based on the steps above which  contain the data below in a JSON file.

 

 

 

Alert ID

 

 

 

 

Description

 

 

 

 

Current Time

 

 

 

 

12:00 AM

 

 

 

 

11:00 AM

 

 

 

 

11:00 AM

 

 

 

 

11:00 AM

 

 

 

 

11:00 AM

 

 

 

 

11:00 AM

 

 

 

 

11:00 AM

 

 

 

 

11:00 AM

 

 

 

 

11:00 AM

 

 

 

 

ORAEST006

 

 

 

 

Streams Error in tucson ..[ 5min ]

 

 

 

 

2

 

 

 

 

4

 

 

 

 

3

 

 

 

 

3

 

 

 

 

5

 

 

 

 

1

 

 

 

 

2

 

 

 

 

3

 

 

 

 

3

 

 

 

 

4

 

 

 

 

ORAEST006

 

 

 

 

Streams Error in tucson .. [ 5min ]

 

 

 

 

2

 

 

 

 

4

 

 

 

 

3

 

 

 

 

3

 

 

 

 

5

 

 

 

 

1

 

 

 

 

2

 

 

 

 

3

 

 

 

 

3

 

 

 

 

4

 

 

 

 

ORAEST006

 

 

 

 

Streams Error in tucson .. [ 5min ]

 

 

 

 

2

 

 

 

 

4

 

 

 

 

3

 

 

 

 

3

 

 

 

 

5

 

 

 

 

1

 

 

 

 

2

 

 

 

 

3

 

 

 

 

3

 

 

 

 

4

 

 

 

Conclusion: With the example above, we learned that it’s really simple and easy to use JSON data format and parse it in JQuery.

 

Reference for Definition:

http://www.json.org/