You may want to use JSON with your JavaScript code to put objects in motion. In this example, you use AJAX to open and display a text document containing a snippet of HTML. Another common use for AJAX is to request and receive data for processing by the browser. For example, gasbuddy.com uses a map from Google along with data about gas prices, to present a simple and up-to-date view of gas prices in different locations.
If you examine gasbuddy.com in the Network tab, you’ll find that some requests have responses that look something like this code.
([{id:"tuwtvtuvvvv",base:[351289344,822599680],zrange:[11,11],layer:"[email protected]",features:[{id:"17243857463485476481",a:[0,0],bb:[-8,-8,7,7,-47,7,48,22,-41,19,41,34],c:"{1:{title:"Folsom Lake State Recreation Area"},4:{type:1}}"}]},{id:"tuwtvtuvvvw",zrange:[11,11],layer:"[email protected]"},{id:"tuwtvtuvvwv",base:[351506432,824291328],zrange:[11,11],layer:"[email protected]",features:[{id:"8748558518353272790",a:[0,0],bb:[-8,-8,7,7,-41,7,41,22],c:"{1:{title:"Deer Creek Hills"},4:{type:1}}"}]},{id:"tuwtvtuvvww",zrange:[11,11],layer:"[email protected]"}])
If you take a small piece of data out of this block of code and reformat it, you get something like this, which should look more familiar to you.
{id:"tuwtvtuvvvv",
base:[351289344,822599680],
zrange:[11,11],
layer:"[email protected]",
features:[{
id:"17243857463485476481",
a:[0,0],
bb:[-8,-8,7,7,-47,7,48,22,-41,19,41,34],
c:"{
1:{title:"Folsom Lake State Recreation Area"},
4:{type:1}
}"}
]}
}
By looking at the format of the data, you can see that it looks suspiciously like the name:value format of a JavaScript object literal.
The main reason JSON is so easy to use is because it’s already in a format that JavaScript can work with, so no conversion is necessary.
{ "book_title": "Coding with JavaScript For Dummies",
"book_author": "Chris Minnick and Eva Holland",
"summary": "Everything beginners need to know to start coding with JavaScript!",
"isbn":"9781119056072"
}
This example shows how this data can be loaded into a web page using JavaScript and then used to display its data in HTML.
<html>
<head>
<title>Displaying JSON Data</title>
<script>
window.addEventListener(‘load’,init,false);
function init(e){
document.getElementById(‘myButton’).<br/>addEventListener(‘click’,documentLoader,false);
}
function reqListener () {
// convert the string from the file to an object with JSON.parse
var obj = JSON.parse(this.responseText);
// display the object’s data like any object
document.getElementById(‘book_title’).innerHTML = <br/>obj.book_title;
document.getElementById(‘book_author’).innerHTML = <br/>obj.book_author;
document.getElementById(‘summary’).innerHTML = <br/>obj.summary;
}
function documentLoader(){
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "listing16-4.json", true);
oReq.send();
}
</script>
</head>
<body>
<form id="myForm">
<button id="myButton" type="button">Click to <br/>Load</button>
</form>
<h1>Book Title</h1>
<div id="book_title"></div>
<h2 id="tab1" >Authors</h2>
<div id="book_author"></div>
<h2 id="tab2" >Summary</h2>
<div id="summary"></div>
</body>
</html>
The key to displaying any JSON data that’s brought into a JavaScript document from an external source is to convert it from a string to an object using the JSON.parse method. After you do that, you can access the values within the JSON file using dot notation or bracket notation as you would access the properties of any JavaScript object.
Check out the results of running this code in a web browser and pressing the button to load the JSON data.
