JavaScript JSON
What Is JSON?
JSON is a text format for storing and exchanging data.
JSON stands for JavaScript Object Notation.
JSON is language independent.
JSON is Text
JSON is not a JavaScript object.
What Is JSON Used For?
JSON is used to send, receive and store data.
JSON is integrated into JavaScript and many other programming languages.
The JSON.parse() method converts JSON text into a JavaScript values.
The JSON.stringify() mathod converts a JavaScript value into JSON text.
A JSON Example
Example
This JSON text describes a person:
{
"name": "John",
"age": 30,
"city": "New York"
}
JSON data is written as name/value pairs.
In the example above:
- "name" is a name and "John" is its value.
- "age" is a name and 30 is its value.
- "city" is a name and "New York" is its value.
Why Use JSON?
Computers and applications often need to exchange data.
JSON provides a simple text format that many programming languages can read and create.
JSON is commonly used for:
- Sending data from a web server to a web page
- Sending data from a web page to a server
- Storing configuration data
- Saving structured data in files
- Exchanging data between applications
JSON and JavaScript
JSON syntax is based on JavaScript object syntax.
Because the syntax looks similar, JSON text is often confused with JavaScript objects.
JavaScript Object
Example
const person = {
name: "John",
age: 30,
city: "New York"
};
JSON Text
Example
{
"name": "John",
"age": 30,
"city": "New York"
}
The JavaScript example creates an object that JavaScript can use directly.
The JSON example is text that follows JSON syntax.
Notice that JSON names must be written inside double quotes.
Converting JSON to JavaScript
Before JavaScript can work with JSON text, the text normally has to be converted into a JavaScript value.
The JSON.parse() method converts JSON text into a JavaScript value:
Example
// JSON text
const text = '{"name":"John", "age":30, "city":"New York"}';
// Parse the JSON text
const person = JSON.parse(text);
Try it Yourself »
After parsing, the properties can be accessed with normal JavaScript object syntax.
The JSON.parse() method does not always return an object.
It returns the JavaScript value represented by the JSON text.
Converting JavaScript to JSON
The JSON.stringify() method converts a JavaScript value into JSON text:
Example
const person = {
name: "John",
age: 30,
city: "New York"
};
const text = JSON.stringify(person);
document.getElementById("demo").innerHTML = text;
Try it Yourself »
JSON Data Flow
JSON text
🠇
JSON.parse()
🠇
JavaScript value
🠇
JSON.stringify()
🠇
JSON text
JSON Files
JSON data can be stored in a file.
JSON files normally use the .json file extension.
customer.json
{
"name": "John",
"age": 30,
"city": "New York"
}
JavaScript can load JSON files and convert their contents into JavaScript values.
You will learn how to load JSON later in this tutorial.
JSON Is Language Independent
JSON was inspired by JavaScript object syntax, but it is not limited to JavaScript.
Most modern programming languages can read and create JSON.
This makes JSON useful for exchanging data between applications written in different languages.
JSON Values
JSON can represent the following types of values:
- Strings
- Numbers
- Booleans
- null
- Objects
- Arrays
You will learn more about JSON values in the next chapters.
