This site is mobile accessible. Press the "Tap Here" button to use a different font-size.
Smartphone icons created by Freepik - Flaticon
18.2 JSON Syntax
The JSON syntax is a subset of the JavaScript syntax.
JSON Syntax Rules
- JSON syntax is derived from JavaScript object notation syntax:
- Data is in name/value pairs
- Data is separated by commas
- Curly braces hold objects
- Square brackets hold arrays
JSON Data - A Name and a Value
- JSON data is written as name/value pairs.
- A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value:
Example
"name":"John"
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:
JSON
{ "name":"John" }
In JavaScript, keys can be strings, numbers, or identifier names:
JavaScript
{ name:"John" }
JSON Values
- In JSON, values must be one of the following data types:
- a string
- a number
- an object (JSON object)
- an array
- a boolean
- null
- In JavaScript values can be all of the above, plus any other valid JavaScript expression, including:
- a function
- a date
- undefined
- In JSON, string values must be written with double quotes:
JSON
{ "name":"John" }
In JavaScript, you can write string values with double or single quotes:
JavaScript
{ name:'John' }
JavaScript Objects
- Because JSON syntax is derived from JavaScript object notation, very little extra software is needed to work with JSON within JavaScript.
- With JavaScript you can create an object and assign data to it, like this:
Example
var person = { name: "John", age: 31, city: "New York" };
You can access a JavaScript object like this:
// returns John
person.name;
It can also be accessed like this:
// returns John
person["name"];
Data can be modified like this:
person.name = "Gilbert";
It can also be modified like this:
person["name"] = "Gilbert";
You will learn how to convert JavaScript objects into JSON later in this tutorial.
JavaScript Arrays as JSON
- The same way JavaScript objects can be used as JSON, JavaScript arrays can also be used as JSON.
- You will learn more about arrays as JSON later in this tutorial.
JSON Files
- The file type for JSON files is ".json"
- The MIME type for JSON text is "application/json"
JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon
Example files created in this module:
JSON Syntax - Access a JavaScript object part 1
JSON Syntax - Access a JavaScript object part 2
JSON Syntax - Modify a JavaScript Object part 1
JSON Syntax - Modify a JavaScript Object part 2
JSON Parse - Parsing JSON
JSON Parse - JSON From the Server
JSON Parse - Array as JSON
JSON Parse - Parsing Dates part 1
JSON Parse - Parsing Dates part 2
JSON Parse - Parsing Dates part 3
JSON Stringify - Stringify a JavaScript Object part 1
JSON Stringify - Stringify a JavaScript Object part 2
JSON Stringify - Storing data in local storage
JSON Stringify - Stringify Dates
JSON Stringify - Stringify Functions part 1
JSON Stringify - Stringify Functions part 2
JSON Objects - Creating an Object from a JSON Literal part 1
JSON Objects - Creating an Object from a JSON Literal part 2
JSON Objects - Access a JavaScript Object part 1
JSON Objects - Access a JavaScript Object part 2
JSON Objects - Looping an Object part 1
JSON Objects - Looping an Object part 2
JSON Arrays - Create JavaScript Arrays
JSON Arrays - Create JavaScript Arrays part 2
JSON Arrays - Accessing Array Values
JSON Arrays - Accessing Array Values in Objects
JSON Arrays - Looping Through an Array
JSON Server - Sending Data to a Server
JSON Server - Receiving Data from a Server
JSON Server - JSON From a Server
JSON Server - JSON returned from a server as an array:
JSON Server - Get JSON Data from a PHP Server part 1
JSON Server - Get JSON Data from a PHP Server part 2
JSON Server - Get JSON Data from a PHP Server part 3
JSON Server - Get JSON Data from a PHP Server part 4
JSON Server - Get JSON Data from a PHP Server part 5
JSON HTML - Make a table based on JSON data
JSON JSONP - Request JSON using the script tag
JSON JSONP - Dynamic Script Tag
JSON JSONP - Callback Function