JavaScript JSON

JSON (JavaScript Object Notation) is a lightweight data format for storing and exchanging data. It is widely used to send data between a server and a client. JSON is simple, language-independent, and easy to understand.

• JSON stands for JavaScript Object Notation.
• It is a lightweight, text-based data interchange format.
• It is language-independent, meaning it can be used with most programming languages.
• JSON is derived from JavaScript but can be used with any programming language.
• JSON is “self-describing,” making it human-readable.

Here is an example of JSON that defines an employee object containing an array of three employee records:

{
    "employees": [
        { "firstName": "Amit", "lastName": "Kumar" },
        { "firstName": "Jay", "lastName": "Sharma" },
        { "firstName": "Mohit", "lastName": "Patel" }
    ]
}

JSON Syntax

JSON syntax is derived from JavaScript objects. Here are the rules:

• Data is written as name/value pairs (e.g., “name”: “Mohit”).
• Objects are enclosed in curly braces {}.
• Arrays are enclosed in square brackets [].
• Strings are wrapped in double quotes.
• Data values can be strings, numbers, booleans, arrays, objects, or null.

Converting JSON Text to a JavaScript Object

You can use the JSON.parse() method to convert a JSON string into a JavaScript object.

const jsonStr = `{
    "emp": [
        { "firstName": "Amit", "lastName": "Kumar" },
        { "firstName": "Jay", "lastName": "Sharma" },
        { "firstName": "Mohit", "lastName": "Patel" }
    ]
}`;

const obj = JSON.parse(jsonStr);
console.log(obj.emp[1].firstName);

Jay

Displaying JSON Data in HTML

<p id="demo"></p>

<script>
    const s = `{
    "emp": [
        { "firstName": "Amit", "lastName": "Kumar" },
        { "firstName": "Jay", "lastName": "Sharma" },
        { "firstName": "Mohit", "lastName": "Patel" }
    ]
 }`;

    const obj = JSON.parse(s);
    document.getElementById("demo").innerHTML =
        obj.emp[1].firstName + " " + obj.emp[1].lastName;
</script>

Converting a JavaScript Object to JSON

To send data to a server, you need to convert a JavaScript object to a JSON string using JSON.stringify().

const obj = { fname: "Mohit", lname: "Kumar", age: 30 };
const jsonStr = JSON.stringify(obj);

console.log(jsonStr);

{"fname":"Mohit","lname":"Kumar","age":30}

JSON Objects

JSON objects are collections of key/value pairs enclosed in curly braces {}.

{
    "fName": "Mohit",
    "lName": "Kumar",
    "age": 30
}

In JavaScript, you can access the data as follows:

const obj = { fName: "Mohit", lName: "Kumar", age: 30 };
console.log(obj.fName);

Mohit

JSON Arrays

JSON arrays are collections of values enclosed in square brackets [].

{
    "hobbies": ["reading", "coding", "traveling"]
}

You can access the data in JavaScript like this:

const obj = { hobbies: ["reading", "coding", "traveling"] };
console.log(obj.hobbies[1]);

coding

JSON in APIs

JavaScript JSON

JSON is commonly used in APIs to exchange data between a client and server. In a typical web application, the server sends data to the client (frontend) as JSON.

Server Side:

• Data is stored as a JavaScript object.
• Before sending the data to the client, it’s converted to a JSON string using JSON.stringify().

Client Side:

• The JSON string is received as part of an API response (e.g., via an HTTP GET request).
• The client parses this string back into a JavaScript object using JSON.parse().
• The parsed object is then used in the frontend code.

Here’s a JSON string received from the server

const jsonString = '{"name":"Mohit", "age":30}';

It has an object with the properties

• name: “Mohit”
• age: 30

To access its properties, we need to parse it into a JavaScript object:

const jsonS = '{"name":"Mohit", "age":30}';

const obj = JSON.parse(jsonS);
let name = obj.name;
let age = obj.age;

console.log(`Name: ${name}, Age: ${age}`);

Name: Mohit, Age: 30

Advantages of JSON

• Easy to Use: Readable and easy to understand.
• Lightweight: Minimal overhead for data transmission.
• Cross-Language Support: Compatible with most programming languages.
• Built-In Methods in JavaScript: Simplifies parsing and stringifying.

JavaScript JSON – FAQs

What is JSON?

JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. It is often used for transmitting data in web applications.

How do you create a JSON object in JavaScript?

A JSON object is created using JavaScript object notation. It is a text format that represents structured data.

How do you convert a JavaScript object to a JSON string?

You use the JSON.stringify() method to convert a JavaScript object to a JSON string.

How do you parse a JSON string to a JavaScript object?

You use the JSON.parse() method to parse a JSON string and convert it to a JavaScript object.

W

Wazeed17

Follow

Improve