JSON (JavaScript Object Notation) is a data presentation format primarily used to exchange data between server and client (browser).
JSON is versatile and lightweight and supported by many programming languages. Because it presents data as objects (key-value pairs) it works well with JavaScript which is object oriented as well.
JSON Syntax
JSON presents data in key-value pairs enclosed in curly brackets. Take a look below:
A simple JSON object presenting student user data
{
"name": "Pete Bete",
"age": 30,
"email": "john.doe@example.com",
"level": "A Level",
"isStudent": true,
"subjects":["Biology","Maths","Chemistry"]
}
Advanced JSON object storing book collection data
{
"library": {
"name": "City Library",
"location": "123 Main St, Springfield",
"books": [
{
"title": "To Kill a Mockingbird",
"author": "Harper Lee",
"yearPublished": 1960,
"genres": ["Fiction", "Classic"]
},
{
"title": "1984",
"author": "George Orwell",
"yearPublished": 1949,
"genres": ["Dystopian", "Science Fiction"]
},
{
"title": "Moby Dick",
"author": "Herman Melville",
"yearPublished": 1851,
"genres": ["Adventure", "Classic"]
}
],
"openingHours": {
"Monday": "9 AM - 5 PM",
"Tuesday": "9 AM - 5 PM",
"Wednesday": "9 AM - 5 PM",
"Thursday": "9 AM - 8 PM",
"Friday": "9 AM - 5 PM",
"Saturday": "10 AM - 4 PM",
"Sunday": "Closed"
}
}
}
JSON can be stored in files with the .json extension.
JSON Data Types
JSON supports multiple data types. Here’s a list of supported data types:
- Strings
- Integers & Floats
- Arrays
- Booleans
- null
- Other JSON objects
JSON & JavaScript
JSON can be used conveniently in JavaScript by parsing the JSON string into JavaScript objects. The JSON.parse function is used for the conversion. Take a look below.
The JSON.stringify function is used to convert JavaScript objects into JSON strings. Example:
const data = {
name: "Pete Bete",
age: 30,
email: "peter@somesite.com",
level: "A Level",
isStudent: true,
subjects:["Biology","Maths","Chemistry"]
}
const jsonString = JSON.stringify( data );
console.log( jsonString );
// Output
//{"name":"Pete Bete","age":30,"email":"peter@somesite.com","level":"A Level","isStudent":true,"subjects":["Biology","Maths","Chemistry"]}
JSON Parse
The JSON.parse function is used to parse a JSON string into a JavaScript object
const data = '{"name":"Pete Bete","age":30,"email":"peter@somesite.com","level":"A Level","isStudent":true,"subjects":["Biology","Maths","Chemistry"]}'
const json = JSON.parse( data );
console.log( json );
// Output
/*{
name: "Pete Bete",
age: 30,
email: "peter@somesite.com",
level: "A Level",
isStudent: true,
subjects:["Biology","Maths","Chemistry"]
}
*/
JSON & PHP
PHP can parse JSON as well. The json_encode function can convert PHP arrays into JSON while the json_decode function parses a JSON string into a PHP array. Here is an example of encoding a PHP array into JSON:
PHP json_encode()
<?php
$data = [
"name" => "Peter Bete",
"age" => 30,
"email" => "peter@somesite.com",
"level"=>"A Level",
"isStudent" => true,
"subjects"=>["Biology","Maths","Chemistry"]
];
// Convert the array to JSON
$jsonData = json_encode($data);
// Outputting the JSON string
echo $jsonData;
/*Output
{
"name": "Pete Bete",
"age": 30,
"email": "peter@somesite.com",
"level": "A Level",
"isStudent": true,
"subjects":["Biology","Maths","Chemistry"]
}
*/
?>
PHP json_decode()
<?php
//JSON string
$data = '{
"name": "Pete Bete",
"age": 30,
"email": "peter@somesite.com",
"level": "A Level",
"isStudent": true,
"subjects":["Biology","Maths","Chemistry"]
}';
// Convert the JSON to a PHP array
$jsonData = json_decode($data);
// Output the array
print_r($jsonData);
/*Output
stdClass Object ( [name] => Pete Bete [age] => 30 [email] => peter@somesite.com [level] => A Level [isStudent] => 1 [subjects] => Array ( [0] => Biology [1] => Maths [2] => Chemistry ) )
*/
?>
JSON Pros
Lightweight
JSON is lightweight and portable making it fast and easy to store. It also saves data and storage space.
Easy to Understand
JSON data can be read and understood easily
Makes Frontend Development Easy
JavaScript easily uses JSON objects to populate data on a web page. Modern apps built on reactive libraries like React and Vuejs use objects to bind data to HTML elements.
Wide Support
JSON is supported by many programming languages
JSON Cons
Limited Data Types
JSON has limited data types like binary and date data types which may make it difficult to work with in type sensitive environments.
