JavaScript Object Notation (JSON) is a lightweight standard for data interchange. It offers several advantages over XML for data interchange such as it can be used for serializing and transmitting structured data over a network. JSON is used with JavaScript based applications and is primarily used to transmit data between client and server. It is easier to use than XML.
JSON Example
{
"car": [
{
"make":"Toyota",
"model":"Corolla:
},
{
"make":"Honda",
"model":"Civic:
}]
}XML Example
<cars>
<car>
<make>Toyota</make>
<model>Corolla</model>
</car>
<car>
<make>Honda</make>
<model>Civic</model>
</car>
</car>JSON Example
In XML, you need to use a parser to access data. JSON data can be converted to JavaScript objects for easy access by standard JavaScript functions.
<html>
<body>
<h2>Using JavaScript to create JSON object</h2>
<p id="jsontest"></p>
<script>
// JSON data
var text = '{"make":"Toyota","model":"Corolla","price":"$17,000"}'
// create JSON object
var obj = JSON.parse(text);
// access data
document.getElementById("jsontest").innerHTML =
"Jim bought a " + obj.make + " " + obj.model + " for " + obj.price;
</script>
</body>
</html>Output:
Using JavaScript to create JSON object
Jim bought a Toyota Corolla for $17,000- JSON.parse() function converts JSON to an object
- document.getElementById() is used to access JavaScript objects
Working with JSON arrays
JSON syntax also supports arrays. Following is an example of working with JSON arrays using JavaScript.
<html>
<body>
<p id="jsontest"></p>
<script>
var cars = [
{ "make":"Toyota","model":"Corolla" },
{ "make":"Honda","model":"Civic" },
{ "make":"Nissan","model":"Altima" },
];
document.getElementById("jsontest").innerHTML =
"List of Makes: <br/>- " + cars[0].make + "<br/>- " + cars[1].make + "<br/>- " + cars[2].make;
</script>
</body>
</html>Output:
List of Makes:
- Toyota
- Honda
- NissanUsing a JSON file
JSON code can be stored in a JSON file. This is a more practical way of working with JSON. First create a JSON file and save it. The create an HTML file and access the JSON file from it and access its data.
This following example will only work in a client-server environment
cars.json
[
{
"make": "Toyota",
"model": "Corolla",
"url": "http://en.wikipedia.org/wiki/Toyota_Corolla"
},
{
"make": "Honda",
"model": "Civic",
"url": "http://en.wikipedia.org/wiki/Honda_Civic"
},
{
"make": "Nissan",
"model": "Altima",
"url": "http://en.wikipedia.org/wiki/Nissan_Altima"
}
]jsontest.html
<html>
<body>
<div id="jsontest"></div>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "cars.json";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
out += '<a href="' + arr[i].url + '">' +
arr[i].make + '</a><br>';
}
document.getElementById("jsontest").innerHTML = out;
}
</script>
</body>
</html>output
JSON with PHP and MySQL
JSON works beautifully with PHP and MySQL. Let’s assume that you have a database table with a list of vehicle makes and models. The following example shows how to extract this information and display it using JSON. Note that this example will only work in a client-server environment.
json.php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
// database connection
$host = 'aaaa';
$db = 'bbbb';
$user = 'cccc';
$pass = 'dddd';
$conn = new mysqli($host, $user, $pass, $db);
$result = $conn->query("SELECT make, model from cars limit 10");
$out = "[";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($out != "[") {$outp .= ",";}
$out .= '{"make":"' . $rs["make"] . '",';
$out .= '"model":"'. $rs["model"] . '"}';
}
$out .="]";
$conn->close();
echo($outp);jsontest.html
<html>
<body>
<h1>Cars</h1>
<div id="jsontest"></div>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://www.mysite.com/json.php";
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = "<table>";
for(i = 0; i < arr.length; i++) {
out += "<tr><td>" +
arr[i].de +
"</td><td>" +
arr[i].metaphone +
"</td></tr>";
}
out += "</table>"
document.getElementById("jsontest").innerHTML = out;
}
</script>
</body>
</html>output
Cars
| Toyota | Corolla |
| Honda | Civic |
| Nissan | Altima |