FLASH SALE Get 20% OFF everything using the coupon code: FLASH20 View WordPress Plugins →

A JSON Overview

on in JavaScript Arrays & Objects
Last modified on

JavaScript Object Notation, or JSON, is a plain text data interchange format. It is based on a subset of the third edition of the ECMA-262 standard. JSON is used as a mechanism for serializing data structures into strings. These strings are often sent across networks, written to output files, or used for debugging. Many AJAX developers have forgone XML in favor of JSON due to its low overhead.

Grammatically, JSON is very similar to JavaScript’s object literal syntax. The following list describes the rules for creating JSON strings.

  • JSON objects begin with an opening curly brace, {.
  • JSON objects end with a closing curly brace, }.
  • Between the curly braces are zero or more key/value pairs called members.
  • Members are separated by commas.
  • The key and value of each member are separated by a colon.
  • The key is a string and must be surrounded by double quotes.
  • The format of the value depends on the data type. JSON data types are covered later in this post.

A generic JSON object is shown below. Note that JSON requires the keys to be surrounded by double quotes. This is different from object literal syntax which allows double quotes, single quotes, or no quotes at all.

{"key1":value1, "key2":value2, …, "keyN":valueN}

JSON strings are often built programmatically using string variables.  In such cases, it is important to escape the double quotes.  The JSON object from the previous example is shown below, but formatted as a string variable.

var json = "{\"key1\":value1, \"key2\":value2, …, \"keyN\":valueN}";

Supported Data Types

JSON supports many of JavaScript’s native data types. Specifically, JSON supports numbers, strings, booleans, arrays, objects, and null. This section covers the details associated with each of the supported data types.

Number

JSON numbers must not have leading zeros, and must have at least one digit following a decimal point. Due to the restriction on leading zeros, JSON supports base 10 numbers only (octal and hexadecimal formats both require a leading zero). Variables in other bases can be used as long as they are converted to base 10 first. In the following example, four different JSON strings are created. All of the JSON strings define a field named “foo” with the decimal value 100. In the first string, the “foo” value comes from the integer constant 100. In json2, “foo” takes its value from the base 10 variable “decimal”. The third string, json3, takes its value from the base 8 variable “octal”, while json4 gets its value from the base 16 variable “hex”. All of the strings result in the same JSON string, despite the fact that some of the variables have a different radix.

var decimal = 100;
var octal = 0144; // octals have a leading zero
var hex = 0x64;   // hex numbers begin with 0x
var json1 = "{\"foo\":100}";
var json2 = "{\"foo\":" + decimal + "}";
var json3 = "{\"foo\":" + octal + "}";
var json4 = "{\"foo\":" + hex + "}";

// all JSON strings are {"foo":100}

The examples above work because the variables “octal”, and “hex” are implicitly cast to base 10 numbers during string concatenation. However, the following examples are not valid JSON because the non-decimal numbers are built directly into the string.

var json1 = "{\"foo\":0144}";
var json2 = "{\"foo\":0x64}";

String

JSON strings are very similar to normal JavaScript strings, however there are minor differences. JSON strings must be enclosed in double quotes. Attempting to use single quotes will result in an error. In the following example, a JSON string is created with a field named “foo” whose string value is “bar”.

var json = "{\"foo\":\"bar\"}";

// json is {"foo":"bar"}

Boolean

Representing boolean values in JSON is trivial. Boolean fields can only hold the values true and false. The following example creates a JSON string with two fields, “foo” and “bar”. “foo” is assigned the boolean value true, while “bar” is assigned false.

var json = "{\"foo\":true, \"bar\":false}";

// json is {"foo":true, "bar":false}

Array

An array is an ordered sequence of values. Arrays begin with an opening square bracket, [, and end with a closing square bracket, ]. Between the brackets are zero or more values, separated by commas. All of the values do not have to be of the same data type. Arrays can contain any of the data types supported by JSON, including nested arrays. Several JSON arrays are shown in the following example.  The “foo” array defined in json1 is empty, while the one defined in json2 holds two strings. The “foo” array defined in json3 is more complex, holding a number, boolean, a nested array of strings, and an empty object.

var json1 = "{\"foo\":[]}";
var json2 = "{\"foo\":[\"bar\", \"baz\"]}";
var json3 = "{\"foo\":[100, true, [\"bar\", \"baz\"], {}]}";

// json1 is {"foo":[]}
// json2 is {"foo":["bar", "baz"]}
// json3 is {"foo":[100, true, ["bar", "baz"], {}]}

Object

An object is an unordered collection of key/value pairs. The rules for describing JSON objects were described earlier in this post. As with arrays, objects can also be composed of any of the data types supported by JSON. The following example shows how JSON objects can be nested within each other.

var json = "{\"foo\":{\"bar\":{\"baz\":true}}}";

// json is {"foo":{"bar":{"baz":true}}}

Null

The null data type is represented in JSON by the word null. The following example creates a JSON string with a null valued field named “foo”.

var json = "{\"foo\":null}";

// json is {"foo":null}

Unsupported Data Types

JavaScript has a number of built in data types that are not supported by JSON. These types are Function, Date, Regular Expression, Error, and Math. In order to serialize an unsupported data type, it must first be converted into some other representation that is JSON compliant. Unfortunately, there is no standardized way of doing this.

Support for JSON

Because JSON is a plain text format, it is not tied strictly to the JavaScript language. Due to its popularity, JSON libraries have been created for a number of other programming languages including C/C++, Java, and PHP. Originally, even JavaScript required the use of libraries in order to use JSON. However, there are several drawbacks to relying on third party libraries.

  • Libraries have overhead and reduce performance.
  • Library implementations can be inconsistent with the standard.
  • If security is essential, it is unwise to trust third party code.

In order to mitigate these issues, modern browsers come equipped with native support for JSON.

Related posts