Updated July 1, 2023
Introduction to JavaScript Object Notation
JavaScript Object Notation, also known as JSON, this JSON is a short form of JavaScript Object Notation which is a format for sharing data. JSON serves as a valuable format for data interchange, facilitating communication between computer applications operating in diverse geographical locations. JSON is a human-readable format, so applications can easily parse data. JSON can contain text, curly braces, square brackets, commas, double quotes, colons, and other characters.
- Collection of key/ value pairs. It can also be an object, struct, record, dictionary, key list, array, or hash table.
- An ordered list of values can be an array, sequence, or vector.
When you start working with JSON, JSON objects are represented using a .json file, but sometimes can be JSON or string.
Syntax:
JSON is a key value pair structure.
{
"var1" : "value1",
" var2" : "value2",
" var3" : "value3",
" var4_boolean" :value4,
"var5_number" :value5
}Most of the data used in JSON ends up encapsulated by JSON objects. JSON keys are on the left side, and JSON values are on the right side. JSON values can be complex data objects of JSON. JSON object is not similar to JavaScript Object.
Examples of JavaScript Object Notation
Given below are the examples mentioned:
Example #1
JSON Object.
Code:
"employee": {
"empID": 3088,
"empName": "Saideep",
"empLocation": "Canada"
}
}Example #2
Code:
"employees": [
{
"empID": 3088,
"empName": "Amar",
"empLocation": "USA"
},
{
"empID": 2089,
"empName": "User",
"empLocation": "Canada"
},
{
"empID": 3090,
"empName": "User2",
"empLocation": "Canada"
}
]
}We have JSON methods like stringify(), parse(), and many more to come over.
- Stringify(): Conversion of JavaScript Object to JSON string.
- Parse(): Conversion of JSON String to JavaScript Object.
Example #3
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Conversion of JavaScript object into a JSON string.</h2>
<script>
var sample = { empname: "Janu", empage: 31, empcity: "Quebec" };
var JSON = JSON.stringify(sample);
document.write(JSON);
</script>
</body>
</html>Output:
Example #4
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Converting string written in JSON format to JavaScript object.</h2>
<p id="demo"></p>
<script>
var sample = '{"empname":"Karthick", "empage":39, "empcity":"New York"}';
var parse = JSON.parse(sample);
document.getElementById("demo").innerHTML = parse.empname;
</script>
</body>
</html>Output:
Complex types among these JSON values are Nested Objects and Nested Arrays; these nested arrays and objects will be passed as values assigned to keys, which comprise key-value pairs. JavaScript uses square brackets on both ends of the array type.
For Example:
Code:
{
"empName" : "Sammy",
"fatherName" : "Shark",
"location" : "location1",
"weblinks" : [
{
"description" : "work",
"URL" : "https://www.digitalocean.in/"
},
{
"description" : "tutorials",
"URL" : "https://www.tutorials.com/community/tutorials"
}
],
"social_media" : [
{
"description" : "snap",
"link" : "https://snap.com/digitalocean"
},
{
"description" : "facebook",
"link" : "https://www.facebook.com/"
},
{
"description" : "github",
"link" : "https://github.com/digital"
}
]
}Usage of JavaScript Object Notation
Given below is the usage of JavaScript Object Notation:
- Also used for transmitting serialized or deserialized data over the network.
- It can be used with major programming languages in Software.
- Used for data transmission from web applications to servers.
- Web services like REST and SOAP use JSON for the transmission of data.
Properties of JavaScript Object Notation
Given below are the properties :
- It is a lightweight data-interchange format text tool.
- It is easy to read/ write by users and understandable by customers.
- It is independent of other programming languages
Rules to be Followed while Creating a JSON
- Should start and end with curly braces ‘{ }.’
- The key field is enclosed within double quotation marks in JSON.
- The value field is indicated by a colon (‘:’) following the keys.
- Key-value pairs are separated by commas (‘,’) in JSON.
- Values can be of any data type: string, boolean, number, object, etc.
JSON matter as it can be used to load data asynchronously i.e. without rendering. Allows to overcome cross-domain issues, a method JSONP a callback function to send JSON back to the domain.
Conclusion
As JSON is one of the most popular data transformation formats used for data transition. It is lightweight and enables users to store, share and work with data easily. JSON, sometimes being said as a subclass of JavaScript, can be read and modified using any programming language. Also, JSON Formatter to format a JSON string to a readable format.
Recommended Articles
This is a guide to JavaScript Object Notation. Here we discuss the introduction to JavaScript Object Notation with examples, usage, properties, and rules. You may also have a look at the following articles to learn more –
