How to Create and Manipulatinag JSON Data in javaScript?

The JavaScript Object Notation (JSON) is a lightweight data interchange format commonly used for transmitting data between the server and a web application. The JSON data is represented as the key-value pairs and is easy to read and write for both humans and machines. In JavaScript, JSON objects can be easily created and manipulated using built-in methods and functions.

Creating JSON Data

JSON data consists of key-value pairs enclosed in curly braces{}, with keys and values separated by a colon ":". Arrays are represented using square brackets []. To create JSON data in JavaScript we can define an object literal with the key-value pairs and then use the JSON.stringify( ) method to convert the object into the JSON string.

Syntax:

// Define an object literal
const jsonObject = {
    key1: value1,
    key2: value2,
    // Add more key-value pairs as needed
};
// Convert object to JSON string
const jsonString = JSON.stringify(jsonObject);

Example: Implementation to create a JSON data using javascript method.

const person = {
    name: "Kumar",
    age: 30,
    city: "Bangalore"
};
// Convert object to the JSON string
const jsonPerson = JSON.stringify(person);
console.log(jsonPerson);

{"name":"Kumar","age":30,"city":"Bangalore"}

Parsing JSON Data

To parse a JSON string back into a JavaScript object, you can use the JSON.parse() method.

Example: Implementation of JSON.parse() method.

const jsonString = {
    "name": "Kumar",
    "age": 30,
    "city": "Bangalore"
};
const jsonObject = jsonString;
console.log(jsonObject);

{ name: 'Kumar', age: 30, city: 'Bangalore' }

Manipulating JSON Data

To manipulate JSON data in JavaScript we can parse a JSON string into the JavaScript object using JSON.parse() method. Once parsed, we can access and modify the properties of the JavaScript object as needed.

Syntax:

// Parse JSON string into the JavaScript object
const jsonObject = JSON.parse(jsonString);

To update an existing property, simply assign a new value to it:

jsonString.name='GeeksforGeeks'

If you need to remove a property, you can use the delete keyword:

delete jsonString.age;

Example: Implementation to showcase the manipulation of the JSON data.

const jsonCar = '{"make":"Toyota","model": "Camry", "year": 2024}';
const car = JSON.parse(jsonCar);

// Access and modify properties
// of JavaScript object

console.log(car.make);
console.log(car.model);

// Modify the year property
car.year = 2020;

// Convert JavaScript object
// back to the JSON string
const updatedJsonCar = JSON.stringify(car);
console.log(updatedJsonCar);

Toyota
Camry
{"make":"Toyota","model":"Camry","year":2020}

Working with Nested Data

JSON supports nested objects and arrays, allowing you to represent complex data structures. For example:

const employee = {
    "name": "Rajveer",
    "department": {
        "name": "Engineering",
        "location": "India"
    },
    "projects": [
        { "name": "Project A", "status": "In Progress" },
        { "name": "Project B", "status": "Completed" }
    ]
};

We can access nested properties using dot notation or bracket notation:

console.log(employee.department.name);  // Output: Engineering
console.log(employee["projects"][0].name);  // Output: Project A

Conclusion

JSON is a lightweight data interchange format that is widely used in web development. In JavaScript, you can easily create, parse, and manipulate JSON data using built-in methods like JSON.stringify() and JSON.parse(). Understanding how to work with JSON data is essential for handling data from APIs, storing configurations, and communicating between client and server applications.