JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JSON Syntax

A JSON object is a name/value data format that is typically rendered in curly braces.

A JSON object looks something like this:

When you’re working with JSON, you’ll likely see JSON objects in a .json file, but they can also exist as a JSON object or string within the context of a program.


JSON Syntax Rules

JSON syntax is basically considered as a subset of JavaScript syntax, it includes the following:

  • Data is represented in name/value pairs
  • Data is separated by commas
  • Curly braces hold objects
  • Square brackets hold arrays

JSON Structure

JSON is built on two structures:

  • A collection of name/value pairs (objects)
  • An ordered list of value (arrays)

JSON Data - Name/Value Pair

JSON data is represented in name/value pairs.

A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value:

JSON names require double quotes. JavaScript names don't.


JSON - Evaluates to JavaScript Objects

The JSON format is almost identical to JavaScript objects.

In JSON, keys must be strings, written with double quotes:

In JavaScript, keys can be strings, numbers, or identifier names:

In JSON, string values must be written with double quotes:

In JavaScript, you can write string values with double or single quotes:


JSON vs XML

Both JSON and XML can be used to receive data from a web server.

The following JSON and XML examples both define an books object, with an array of 3 books:

JSON Example:
XML Example:

From the above examples you can see:

  • JSON doesn't use end tag
  • JSON is shorter
  • JSON is quicker to read and write
  • JSON can use arrays

The biggest difference is: XML has to be parsed with an XML parser. JSON can be parsed by a standard JavaScript function.

JSON is Better Than XML:

  • XML is much more difficult to parse than JSON
  • JSON is parsed into a ready-to-use JavaScript object