This site is mobile accessible. Press the "Tap Here" button to use a different font-size.

Smartphone icons created by Freepik - Flaticon

18.1 JSON Intro

JSON stands for JavaScript Object Notation
JSON is a text format for storing and transporting data
JSON is "self-describing" and easy to understand

JSON Example

This example is a JSON string:

'{"name":"John", "age":30, "car":null}'

It defines an object with 3 properties:
- name
- age
- car
Each property has a value.
If you parse the JSON string with a JavaScript program, you can access the data as an object:

let personName = obj.name;
let personAge = obj.age;

What is JSON?

JSON stands for JavaScript Object Notation
JSON is a lightweight data-interchange format
JSON is plain text written in JavaScript object notation
JSON is used to send data between computers
JSON is language independent *

*
The JSON syntax is derived from JavaScript object notation, but the JSON format is text only.
Code for reading and generating JSON exists in many programming languages.

The JSON format was originally specified by Douglas Crockford (links to an external site..)

Why Use JSON?

The JSON format is syntactically similar to the code for creating JavaScript objects. Because of this, a JavaScript program can easily convert JSON data into JavaScript objects.
Since the format is text only, JSON data can easily be sent between computers, and used by any programming language.
JavaScript has a built in function for converting JSON strings into JavaScript objects:
JSON.parse()
JavaScript also has a built in function for converting an object into a JSON string:
JSON.stringify()
You can receive pure text from a server and use it as a JavaScript object.
You can send a JavaScript object to a server in pure text format.
You can work with data as JavaScript objects, with no complicated parsing and translations.

Storing Data

When storing data, the data has to be a certain format, and regardless of where you choose to store it, text is always one of the legal formats.
JSON makes it possible to store JavaScript objects as text.

JavaScript Fundamentals course home
Module 18. JS JSON

Navigate this module

Eventually the navigation links, above, will be replaced by these << (previous) and >> (next) buttons below.

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