Open In App
Related Articles

JavaScript JSON

Improve Article
Improve
Save Article
Save
Like Article
Like

What is JSON?

JSON or JavaScript Object Notation is a format for structuring data.

What is it used for?

Like XML, it is one of the ways of formatting the data. Such a format of data is used by web applications to communicate with each other.

Why JSON? 

The fact that whenever we declare a variable and assign a value to it, it’s not the variable that holds the value but rather the variable just holds an address in the memory where the initialized value is stored. Further explaining, take for example:

let age=21;

when we use age, it gets replaced with 21, but that does not mean that age contains 21, rather what it means is that the variable age contains the address of the memory location where 21 is stored.

You might think what is the problem, how is JSON helpful?

Well, yes, you are right! it is fine here till now but imagine you have to transfer the data and use it somewhere else (like an API maybe), so how will we share this? One way could be to send your computers entire memory along with the address of the locations that are required, as you might have understood now that this is not at all a good way to do it, also it is risky to send your entire computer memory. Here comes JSON to the rescue, JSON serializes the data and converts it into a human-readable and understandable format, which also makes it transferal and to be able to communicate.

Characteristics of JSON

  • It is Human-readable and writable.
  • It is a light weight text-based data interchange format which means, it is simpler to read and write when compared to XML.
  • It is widely used as a data storage and communication format on the web.
  • Though it is derived from a subset of JavaScript, it is Language independent. Thus, the code for generating and parsing JSON data can be written in any other programming language.

JSON Syntax Rules

JSON syntax is derived from JavaScript object notation syntax:

  • Data is in name/value pairs Example:

{ “name”:”Thanos” }

Types of Values: Array: An associative array of values. Boolean: True or false. Number: An integer. Object: An associative array of key/value pairs. String: Several plain text characters which usually form a word.

  • Data is separated by commas Example:

{ “name”:”Thanos”, “Occupation”:”Destroying half of humanity” }

  • Curly braces hold objects Example:

let person={ “name”:”Thanos”, “Occupation”:”Destroying half of humanity” }

  • Square brackets hold arrays Example:

let person={ “name”:”Thanos”, “Occupation”:”Destroying half of humanity”, “powers”: [“Can destroy anything with snap of his fingers”, “Damage resistance”, “Superhuman reflexes”] }

Examples: 

javascript




{
    "Avengers": [
        {
            "Name": "Tony stark",
            "also known as": "Iron man",
            "Abilities": [
                "Genius",
                "Billionaire",
                "Playboy",
                "Philanthropist"
            ]
        },
        {
            "Name": "Peter parker",
            "also known as": "Spider man",
            "Abilities": [
                "Spider web",
                "Spidy sense"
            ]
        }
    ]
}


Convert a JSON Text to a JavaScript Object

In this example, we will see how to convert a JSON text into a JavaScript Object

Example: We will be using the JSON.parse() method to convert the JSON text to a JavaScript Object.

Javascript




let text = '{"model":[' +
    '{"carName":"Baleno","brandName":"Maruti" },' +
    '{"carName":"Aura","brandName":"Hyndai" },' +
    '{"carName":"Nexon","brandName":"Tata" }]}';
 
const cars = JSON.parse(text);
console.log("The car name is: " + cars.model[2].carName +
    " of brand: " + cars.model[2].brandName);


Output

The car name is: Nexon of brand: Tata

 

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 20 Nov, 2023
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials