Coding with JavaScript For Dummies
Book image
Explore Book Buy On Amazon

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.

gasbuddy.com uses AJAX to display gas prices on a map.
gasbuddy.com uses AJAX to display gas prices on a map.

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:"m@288429816",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:"m@288429816"},{id:"tuwtvtuvvwv",base:[351506432,824291328],zrange:[11,11],layer:"m@288429816",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:"m@288429816"}])

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:"m@288429816",
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.

Displaying JSON data within an HTML page.
Displaying JSON data within an HTML page.

About This Article

This article is from the book:

About the book authors:

Chris Minnick is an accomplished author, trainer, and web developer who has worked on web and mobile projects for both small and major businesses. Eva Holland is an experienced writer and trainer who has designed and taught online, in-person, and video courses. They are cofounders of WatzThis?

This article can be found in the category: