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.<\/p>\n\n\n\n
JSON Example<\/p>\n\n\n\n
{\n \"car\": [\n {\n \"make\":\"Toyota\",\n \"model\":\"Corolla:\n },\n {\n \"make\":\"Honda\",\n \"model\":\"Civic:\n }]\n}<\/code><\/pre>\n\n\n\nXML Example<\/p>\n\n\n\n
<cars>\n <car>\n <make>Toyota<\/make>\n <model>Corolla<\/model>\n <\/car>\n <car>\n <make>Honda<\/make>\n <model>Civic<\/model>\n <\/car>\n<\/car><\/code><\/pre>\n\n\n\nJSON Example<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
<html>\n<body>\n<h2>Using JavaScript to create JSON object<\/h2>\n<p id=\"jsontest\"><\/p>\n<script>\n\/\/ JSON data\nvar text = '{\"make\":\"Toyota\",\"model\":\"Corolla\",\"price\":\"$17,000\"}'\n\/\/ create JSON object\nvar obj = JSON.parse(text);\n\/\/ access data\ndocument.getElementById(\"jsontest\").innerHTML =\n\"Jim bought a \" + obj.make + \" \" + obj.model + \" for \" + obj.price;\n<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nOutput:<\/p>\n\n\n\n
Using JavaScript to create JSON object<\/h2>\n\n\n\nJim bought a Toyota Corolla for $17,000<\/code><\/pre>\n\n\n\n- JSON.parse() function converts JSON to an object<\/li>
- document.getElementById() is used to access JavaScript objects<\/li><\/ul>\n\n\n\n
Working with JSON arrays<\/h3>\n\n\n\n
JSON syntax also supports arrays. Following is an example of working with JSON arrays using JavaScript.<\/p>\n\n\n\n
<html>\n<body>\n<p id=\"jsontest\"><\/p>\n<script>\nvar cars = [\n { \"make\":\"Toyota\",\"model\":\"Corolla\" }, \n { \"make\":\"Honda\",\"model\":\"Civic\" },\n { \"make\":\"Nissan\",\"model\":\"Altima\" },\n];\ndocument.getElementById(\"jsontest\").innerHTML =\n\"List of Makes: <br\/>- \" + cars[0].make + \"<br\/>- \" + cars[1].make + \"<br\/>- \" + cars[2].make;\n<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\nList of Makes:\n- Toyota\n- Honda\n- Nissan<\/code><\/pre>\n\n\n\nUsing a JSON file<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
This following example will only work in a client-server environment<\/span><\/strong><\/p>\n\n\n\ncars.json<\/p>\n\n\n\n
[\n{\n\"make\": \"Toyota\",\n\"model\": \"Corolla\",\n\"url\": \"http:\/\/en.wikipedia.org\/wiki\/Toyota_Corolla\"\n},\n{\n\"make\": \"Honda\",\n\"model\": \"Civic\",\n\"url\": \"http:\/\/en.wikipedia.org\/wiki\/Honda_Civic\"\n},\n{\n\"make\": \"Nissan\",\n\"model\": \"Altima\",\n\"url\": \"http:\/\/en.wikipedia.org\/wiki\/Nissan_Altima\"\n}\n]<\/code><\/pre>\n\n\n\njsontest.html<\/p>\n\n\n\n
<html>\n<body>\n\n<div id=\"jsontest\"><\/div>\n\n<script>\nvar xmlhttp = new XMLHttpRequest();\nvar url = \"cars.json\";\n\nxmlhttp.onreadystatechange = function() {\n if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {\n var myArr = JSON.parse(xmlhttp.responseText);\n myFunction(myArr);\n }\n}\nxmlhttp.open(\"GET\", url, true);\nxmlhttp.send();\n\nfunction myFunction(arr) {\n var out = \"\";\n var i;\n for(i = 0; i < arr.length; i++) {\n out += '<a href=\"' + arr[i].url + '\">' + \n arr[i].make + '<\/a><br>';\n }\n document.getElementById(\"jsontest\").innerHTML = out;\n}\n<\/script>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\noutput<\/p>\n\n\n\n
Toyota<\/a>
Honda<\/a>
Nissan<\/a><\/p><\/blockquote>\n\n\n\nJSON with PHP and MySQL<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
json.php<\/p>\n\n\n\n
header(\"Access-Control-Allow-Origin: *\");\nheader(\"Content-Type: application\/json; charset=UTF-8\");\n\n\/\/ database connection\n$host = 'aaaa';\n$db = 'bbbb';\n$user = 'cccc';\n$pass = 'dddd';\n\n$conn = new mysqli($host, $user, $pass, $db);\n$result = $conn->query(\"SELECT make, model from cars limit 10\");\n\n$out = \"[\";\nwhile($rs = $result->fetch_array(MYSQLI_ASSOC)) {\n if ($out != \"[\") {$outp .= \",\";}\n $out .= '{\"make\":\"' . $rs[\"make\"] . '\",';\n $out .= '\"model\":\"'. $rs[\"model\"] . '\"}'; \n}\n$out .=\"]\";\n$conn->close();\necho($outp);<\/code><\/pre>\n\n\n\njsontest.html<\/p>\n\n\n\n
<html>\n<body>\n\n<h1>Cars<\/h1>\n<div id=\"jsontest\"><\/div>\n\n<script>\nvar xmlhttp = new XMLHttpRequest();\nvar url = \"http:\/\/www.mysite.com\/json.php\";\n\nxmlhttp.onreadystatechange=function() {\n if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {\n myFunction(xmlhttp.responseText);\n }\n}\nxmlhttp.open(\"GET\", url, true);\nxmlhttp.send();\n\nfunction myFunction(response) {\n var arr = JSON.parse(response);\n var i;\n var out = \"<table>\";\n\n for(i = 0; i < arr.length; i++) {\n out += \"<tr><td>\" + \narr[i].de +\n \"<\/td><td>\" +\n arr[i].metaphone +\n \"<\/td><\/tr>\";\n }\n out += \"<\/table>\"\n document.getElementById(\"jsontest\").innerHTML = out;\n}\n<\/script>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\noutput<\/p>\n\n\n\n
Cars<\/h3>\n\n\n\nToyota<\/td> Corolla<\/td><\/tr> Honda<\/td> Civic<\/td><\/tr> Nissan<\/td> Altima<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":546,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[512],"tags":[54,77,27,24,256],"class_list":["post-169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-misc","tag-javascript","tag-json","tag-mysql","tag-php","tag-quickstart"],"_links":{"self":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts\/169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/comments?post=169"}],"version-history":[{"count":2,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts\/169\/revisions"}],"predecessor-version":[{"id":547,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts\/169\/revisions\/547"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/media\/546"}],"wp:attachment":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/media?parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/categories?post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/tags?post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}