JSON


index
Disabled back button Next Section
printable version
Section 1: Introduction
JSON logo.

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

from Introducing JSON

JSON is a data format much like XML or CSV, just with a different set of formatting rules.

JSON is nothing more (and nothing less) than a format of the data you transfer with the Ajax-way of talking to the server.

JSON is not a competing technology to AJAX, it's just a data format. Where you might hear competition is between XML and JSON, JSON having the advantage of being typically lighter and in native JavaScript already, XML having the advantage of portability and toolsets. Some transfer the data in the form of XML, others just plain text, others use JSON. from When to use Ajax vs Json for Javascript events?

You can find interesting comparisons at Difference between Ajax and JSON and Difference Between JSON and AJAX.

JSON/XML Comparison 1. JSON/XML Comparison 2.
JSON/XML Comparison 3. JSON/XML Comparison 4.
JSON/XML Comparison 5.
Section 2: JSON Purposes & Advantages

JSON Requirements

The JSON is built on two structures:

An example can be viewed in What is JSON (JavaScript Object Notation)?.

Section 3: JSON Syntax and Examples

JSON Object

JSON Syntax

Values can be

Examples

JSON examples.

Here is an example of JSON, implemented as an array of objects.

// This is an example of JSON - an array of objects. JSON is a popular and
// agreed-upon format for sending, receiving, and storing data.

var ourCourses = [
{
"courseNum": "INFO1181",
"courseName": "Programming I",
"courseLanguage": "Python"
},
{
"courseNum": "INFO2220",
"courseName": "Front-end Development",
"courseLanguage": "JavaScript"
},
{
"courseNum": "INFO4407",
"courseName": "Database Design",
"courseLanguage": "SQL"
}
]

You can view additional examples at JSON Example and 10 JSON Examples to Use in Your Projects.

Quotes around names

You should use quotes around names:

Section 4: JSON Conversion

Convert from objects to JSON

var pers = { "name": "Bob", "age": 34 };
// convert object to JSON string.
var pJson = JSON.stringify(pers);

Convert from JSON to object

var jString = '{ "name": "Susan", "age": 32 }';
// convert JSON string to object.
var obj = JSON.parse(jString);

To to access data

Data in JSON files is just text, so it can be

Section 5: JSON Demos with JavaScript

I recommend that you go through the JSON and AJAX Tutorial: With Real Examples video overview, and implement the example. It will help make the overall discussion more understandable.

Examples

JSON files can be accessed using JavaScript, or using jQuery.

Accessing a JSON file using JavaScript

There are many techniques by which a JSON file can be accessed by JavaScript. The following example uses the Fetch API.

The following links provide additional documentation on Fetch.

Section 6: Accessing a JSON file using jQuery – $.getJSON()

As with using JavaScript, there are various techniques for accessing a JSON file using jQuery. The following example uses jQuery's getJSON() method.

Section 7: Accessing a JSON file using jQuery – $.ajax()

You can also use an approach similar to that used in the Ajax discussion, that is, using the jQuery.ajax() method.

$.ajax({
type: 'GET',
url: 'courseLanguages.json',
dataType: 'json',
success: function(data) {
var _class = "";
$.each(data, function(index, item)
{
_class += "The language used in " + item.courseNum + " is ";
_class += item.courseLanguage + ".";
alert(_class);
_class="";
});
},
error: function(xhr, status, error) {
alert("Error: " + xhr.responseText); // error occurred
}
});

Note that both approaches use jQuery’s each() function to loop through each element of the target jQuery object — an object that contains one or more DOM elements.

Section 8: JSON in jQuery

Here is the 4430 professor's PowerPoint presentation on additional JSON concepts:

This material is also included below

There are two ways to use Ajax in jQuery.

.ajax can be used as a method or as an object.

Sample jQuery code with Ajax.

Using the .ajax() method in jQuery

The page jQuery ajax() Method explains the following:

Sample jQuery code with Ajax.

More details about each of the settings can be found in jQuery.ajax().

Using the .ajax() object in jQuery

The Promise Pattern is an approach where we set the stage for something that will happen in the future. The promise is not that your request will be successful. Rather, the promise is that regardless of what happens, an object will be returned. That object has handlers for cases such as success and failure. The key is that regardless of what happens, your calling code will get something back. From there, your code can act accordingly. If the call is successful, your code will proceed as planned. On the other hand, if an error occurs, your code can log the error and redirect to a user-friendly error page or give the user a chance to re-initiate the request.

From The Simplest Thing Possible: Promises in JavaScript.

The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise. Available Promise methods of the jqXHR object include:

See jQuery.ajax() for more details.

Sample jQuery code with Ajax.

Getting the data from the reply

Sample jQuery code with Ajax.

The jQuery AJAX Tutorial may be helpful.