What is JSON?
JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. It is commonly used to transmit data between a server and a web application as text.
JSON Syntax
JSON syntax is derived from JavaScript object notation but is language-independent. It consists of key-value pairs enclosed in curly braces and uses the following conventions:
- Data is in key-value pairs.
- Keys are strings enclosed in double quotes.
- Values can be strings, numbers, arrays, objects, booleans, or null.
{
"name": "John Doe",
"age": 30,
"isStudent": false,
"skills": ["JavaScript", "React", "Node.js"],
"address": {
"city": "New York",
"zip": "10001"
}
}
JSON Data Types
JSON supports the following data types:
- String: "Hello, World!"
- Number: 42, 3.14
- Object: {"key": "value"}
- Array: [1, 2, 3]
- Boolean: true, false
- Null: null
Parsing JSON with JSON.parse()
The JSON.parse() method parses a JSON string and converts it into a JavaScript object.
const jsonString = '{"name": "John", "age": 30}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // Output: John
Stringifying JSON with JSON.stringify()
The JSON.stringify() method converts a JavaScript object into a JSON string.
const jsonObject = { name: "John", age: 30 };
const jsonString = JSON.stringify(jsonObject);
console.log(jsonString); // Output: {"name":"John","age":30}
JSON as an Object
JSON is often used to represent JavaScript objects. These objects can contain nested data structures, arrays, and other objects.
const user = {
name: "Alice",
contact: {
email: "alice@example.com",
phone: "123-456-7890"
},
roles: ["Admin", "Editor"]
};
console.log(user.contact.email); // Output: alice@example.com
JSON in Servers
JSON is widely used in web development to exchange data between a server and a client. Here is an example of a server sending JSON data:
// Example of JSON response from a server
{
"status": "success",
"data": {
"id": 1,
"name": "Product A",
"price": 100.0
}
}
Clients can use fetch or other HTTP libraries to retrieve and process this data.
fetch('https://api.example.com/product')
.then(response => response.json())
.then(data => console.log(data));