JavaScript JSON

In this tutorial, you will learn about JSON and how JavaScript is used with JSON with the assistance of examples.

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.

Javascript Miscellaneous