Annu's blog
What is JSON and What is the JSON.stringify() method

What is JSON and What is the JSON.stringify() method

ANNU KUMARI's photo
ANNU KUMARI
·

4 min read

Table of contents

Hey everyone, what's up? After a long gap, I'm writing my new article about What is JSON and What is JSON.stringify() method in JavaScript. So let's dive into it.

Before we delve into the JSON.stringify() method, it's important to understand what JSON is.

JSON (JavaScript Object Notation) is a lightweight, easy-to-read format for data interchange. It uses a syntax similar to JavaScript objects and arrays and is widely supported across different programming languages. JSON is commonly used for transmitting data over networks, configuring applications, and storing structured data.

Characteristics of JSON

1. Human-Readable:

JSON is designed to be easy to read and write for humans. Its syntax is straightforward and similar to JavaScript object literals.

2. Data Structure:

JSON represents data in a structured format using key-value pairs and arrays.

3. Language Independent:

Although JSON is derived from JavaScript, it is language-independent and can be used with many programming languages, including Python, Java, C#, PHP, and others.

JSON Syntax

JSON syntax is very similar to JavaScript object literals. Here are the basic rules:

1. Objects:

  • Enclosed in curly braces {}.

  • Contain key-value pairs separated by commas.

  • Keys must be strings (enclosed in double quotes).

  • Values can be strings, numbers, objects, arrays, true, false, or null.

Example:

 {
  "name": "Annu",
  "age": 20,
  "city": "Ranchi"
}

2. Arrays:

  • Enclosed in square brackets [].

  • Contain values separated by commas.

  • Values can be strings, numbers, objects, arrays, true, false, or null.

 [1, 2, 3, 4, 5]

3. Strings:

  • Must be enclosed in double quotes ".

  • Can include escape sequences such as \", \\, \n, etc.

 "Hello, World!"

4. Numbers:

  • Can be integers or floating-point numbers.

  • No special formatting for different types of numbers.

123

5. Booleans and Null:

  • Represented as true, false, or null.
 true

Example JSON Data

Here’s a more complex JSON example that includes various data types:

 {
  "name": "Annu",
  "age": 20,
  "isStudent": false,
  "courses": ["Math", "Science"],
  "address": {
    "street": "123 Main St",
    "city": "Ranchi"
  },
  "grades": {
    "Math": "A",
    "Science": "B"
  },
  "graduated": null
}

Common Uses of JSON

1. Data Transmission:

JSON is commonly used to transmit data between a server and a client in web applications, often via AJAX requests or APIs.

2. Configuration Files:

JSON is used for configuration files in various applications due to its simple structure and readability.

3. Data Storage:

JSON can be used to store structured data, such as in NoSQL databases like MongoDB.

Now let's Start JSON.stringify() method in JavaScript.

What is JSON.stringify() method

The JSON.stringify() method in JavaScript converts a JavaScript object or value into a JSON(JavaScript Object Notation) string. This is useful for data serialization, such as preparing data to be a server or stored in a file.

Syntax

JSON.stringify(value[, replacer[, space]])

  • value: The value to convert to a JSON string. This can be any JavaScript object or value.

  • replacer: A function or an array used to control which properties are included in the JSON string.

  • space: A string or number used to add indentation, white space, and line breaks to the output JSON string for readability.

Examples

1. Basic Usage:

const obj = { name: 'Annu', age: 20, city: 'Ranchi' };
const jsonString = JSON.stringify(obj); 
console.log(jsonString); // '{"name":"Annu","age":20,"city":"Ranchi"}'

Converts a JavaScript object into a JSON string.

2. Using replacer:

Function as Replacer:

 const obj = { name: 'Annu', age: 20, city: 'Ranchi' };
const jsonString = JSON.stringify(obj, (key, value) => {
  if (key === 'age') return undefined; // Exclude the 'age' property
  return value;
}); 
console.log(jsonString); // '{"name":"Annu","city":"Ranchi"}'

Array as Replacer:

const obj = { name: 'Annu', age: 20, city: 'Ranchi' };
const jsonString = JSON.stringify(obj, ['name', 'city']); 
console.log(jsonString); // '{"name":"Annu","city":"Ranchi"}'

The replacer can be used to filter or modify the properties that are included in the JSON string.

3. Using space:

Number as Space:

 const obj = { name: 'Annu', age: 20, city: 'Ranchi' };
const jsonString = JSON.stringify(obj, null, 2); // Indentation of 2 spaces
console.log(jsonString);
/*
{
  "name": "Annu",
  "age": 20,
  "city": "Ranchi"
}
*/

String as Space:

 const obj = { name: 'Annu', age: 20, city: 'Ranchi' };
const jsonString = JSON.stringify(obj, null, '---'); // Custom indentation
console.log(jsonString);
/*
{
---"name": "Annu",
---"age": 20,
---"city": "Ranchi"
}
*/

The space parameter is used to format the output JSON string with whitespace for better readability.

Key Points

  • Serialization:JSON.stringify() converts JavaScript objects into a JSON string. It does not serialize functions, undefined, or symbols.

  • Circular References: The method will throw an TypeError if the object contains circular references.

  • Customizing Output: The replacer parameter can be used to exclude or modify specific properties in the JSON string. The space parameter adds indentation for readability.

Conclusion

JSON.stringify() is a versatile method for converting JavaScript objects and values into JSON strings. It can be customized with replacer functions or arrays to control which properties are included and formatted with the space parameter for better readability. It is commonly used for data serialization and transmission in web applications.

jsonJavaScript