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.

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.

 
 


 

  Click to 
Load
 
 
Book Title
 

 
Authors
 

 
Summary
 

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.