In this tutorial, you will learn about JSON and how JavaScript is used with JSON with the assistance of examples.
In this article, you will learn-
What is JSON?
• JSON represents JavaScript Object Notation
• JSON is a lightweight data interchange format
• JSON is language independent *
• JSON is “self-describing” and easy to understand
- The JSON syntax is derived from JavaScript object notation syntax, yet the JSON format is the text as it were. Code for reading and producing JSON information can be written in any programming language.
JSON represents Javascript Object Notation. JSON is a text-based data design that is used to store and move data. For instance,
// JSON syntax { "name": "Salman", "age": 22, "gender": "male", }
In JSON, the information are in key/value sets separated by a comma ,.
JSON was gotten from JavaScript. Thus, the JSON syntax takes after JavaScript object literal syntax. Be that as it may, the JSON format can be gotten to and be made by other programming languages as well.
Note: JavaScript Objects and JSON are not the equivalents. You will learn about their differences later in this tutorial.
JSON Data
JSON data comprises key/value sets like JavaScript object properties. The key and values are written in twofold statements separated by a colon :. For instance,
// JSON data "name": "Salman"
Note: JSON data requires double quotes for the key.
JSON Object
The JSON object is composed inside curly braces { }. JSON objects can contain numerous key/value sets. For instance,
// JSON object { "name": "Salman", "age": 22 }
JSON Array
JSON array is written inside square brackets [ ]. For example,
// JSON array [ "apple", "mango", "banana"] // JSON array containing objects [ { "name": "Salman", "age": 22 }, { "name": "Sohail", "age": 20 }. { "name": "Haroon", "age": 23 } ]
Note: JSON data can contain objects and arrays. In any case, not at all like JavaScript objects, JSON information can’t contain functions as values.
Accessing JSON Data
You can access JSON data using the dot notation. For instance,
// JSON object const data = { "name": "Salman", "age": 22, "hobby": { "reading" : true, "gaming" : false, "sport" : "football" }, "class" : ["JavaScript", "HTML", "CSS"] } // accessing JSON object console.log(data.name); // Salman console.log(data.hobby); // { gaming: false, reading: true, sport: "football"} console.log(data.hobby.sport); // football console.log(data.class[1]); // HTML
We use the . notation to access JSON data. Its syntax is: variableName.key
You can likewise use square bracket syntax [] to get to JSON data. For instance,
// JSON object const data = { "name": "Salman", "age": 22 } // accessing JSON object console.log(data["name"]); // Salman
JavaScript Objects VS JSON
Though the syntax of JSON is like the JavaScript object, JSON is not quite the same as JavaScript objects.
JSON | JavaScript Object |
The key in key/value pair should be in double quotes. | The key in key/value pair can be without double quotes. |
JSON cannot contain functions. | JavaScript objects can contain functions. |
JSON can be created and used by other programming languages. | JavaScript objects can only be used in JavaScript. |
Converting JSON to JavaScript Object
You can change JSON information over to a JavaScript object using the built-in JSON.parse() function. For instance,
// json object const jsonData = '{ "name": "Salman", "age": 22 }'; // converting to JavaScript object const obj = JSON.parse(jsonData); // accessing the data console.log(obj.name); // Salman
Converting JavaScript Object to JSON
You can likewise change over JavaScript objects to JSON format using the JavaScript built-in JSON.stringify() function. For instance,
// JavaScript object const jsonData = { "name": "Salman", "age": 22 }; // converting to JSON const obj = JSON.stringify(jsonData); // accessing the data console.log(obj); // "{"name":"Salman","age":22}"
USe of JSON
JSON is the most commonly used format for transmitting (data interchange) from a server to a customer and the other way around. JSON data are exceptionally simple to parse and use. It is quick to get to and manipulate JSON data as they just contain texts.
JSON is language free. You can make and use JSON in other programming languages as well.
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.