JSON in JavaScript
About JSON
JSON (JavaScript Object Notation) is a lightweight data interchange format.
JSON is used to store and exchange information between a server and a client, or between different systems.
JSON data is easy for humans to read and write, and easy for machines to parse and generate.
JSON is widely used because it is language-independent.
Basic Structure of JSON
JSON data is written as name-value pair and enclosed in curly braces '{}'.
Name and value are paired by colon ':'. (e.g. {"name": "John"})
The name-value pairs are separated by comma (,). (e.g. {"name": "John", "age": 30})
Name must be string type and is always enclosed in double quotes.
Value must be of a specific type. (e.g. {"age": 30})
Example of JSON Structure
Explanation of JSON Structure Example
- "firstname": "John": Here, "firstname" is the name field enclosed in double quotes and "John" is value of name field and it is string type data. They are paired by colon (:).
- "age": 30: Here, "age" is the name field and 30 is the value of name field and it is an integer type data.
- "city": "New York": Here, "city" is the name field and "New York" is the value of name field and it is a string type data.
- "hobbies": ["reading", "coding", "gaming"]: Here, "hobbies" is the name field and ["reading", "coding", "gaming"] is the value of name field and it is an array of string.
- "isStudent": true: Here, "isStudent" is the name field and true is the value of name field and it is a Boolean type data.
JSON Data Types
JSON supports the following data types:
-
String: String is a sequence of characters enclosed in double quotes (""). Single quotes are not allowed. Example:
{ "name": "John Doe" } -
Number: Number represents numeric values, including integers and floating-point numbers. Example:
{ "age": 30 } -
Boolean: Boolean represents a logical value: true or false. Example:
{ "isStudent": true } -
Null: Null represents an empty or undefined value. Example:
{ "designation": null } -
Object: Object represents a collection of key-value pairs enclosed in curly braces
{}. Example:{ "person": {"name": "John", "age": 30} } -
Array: Array represents an ordered list of values enclosed in square brackets
[]. Example:{ "hobbies": ["reading", "coding", "gaming"] }
Using JSON in JavaScript
JavaScript has built-in support for working with JSON data.
Converting JSON String into JavaScript Object
JSON strings can be converted into JavaScript objects using JSON.parse() method.
Example of Converting JSON String into JavaScript Object
Output of the above example
John
30
Explanation of the code
-
const jsonString = '{"name": "John", "age": 30}';: This line declares a JSON string and assigns it to a variable named 'jsonString'. -
const jsObject = JSON.parse(jsonString);: This line parses the JSON string into a JavaScript object using JSON.parse() method and assigns the object to the variable named 'jsObject'. -
console.log(jsObject.name);: This line prints the name property of 'jsObject' object.
Converting JavaScript Object into JSON String
JavaScript Object can be converted into JSON String using JSON.stringify() method.
Example of Converting JavaScript Object into JSON String
Output of the above example
{"name":"John","age":30}
Explanation of the code
-
const jsObject = {name: "John", age: 30};: This line declares a JavaScript object and assigns it to a variable named 'jsObject'. -
const jsonString = JSON.stringify(jsObject);: This line converts JavaScript object into a JSON string using JSON.stringify method and assigns it to the variable named 'jsonString'. -
console.log(jsonString);: This line prints the JSON string in the console.
JavaScript Compiler For Live Practice
Practice the above JavaScript code in the following JavaScript Editor. Create more JSON strings and JavaScript objects for conversion in the following editor and click Execute button to check the output. The output will be displayed in JavaScript Code Output section.
JavaScript Editor