How to Convert JSON to string in JavaScript ?

Last Updated : 03 Jul, 2024

In this article, we are going to learn the conversion of JSON to string in JavaScript. Converting JSON to a string in JavaScript means serializing a JavaScript object or data structure represented in JSON format into a textual JSON string for data storage or transmission.

Several methods can be used to Convert JSON to string in JavaScript, which are listed below:

Table of Content

Using JSON.stringify() Method
Using JSON.stringify() with Indentation
Using JSON.stringify() with Replacer Function
Using JSON.parse() followed by JSON.stringify() Method
Using a Custom Serializer Function
Using Template Literals

We will explore all the above methods along with their basic implementation with the help of examples.

Approach 1: Using JSON.stringify() Method

In this approach, JSON.stringify() in JavaScript converts JSON data into a formatted string representation.

Syntax:

JSON.stringify(value, replacer, space);

Example: In this example, we are using the above-explained method.

JavaScript

const data = { name: "Nikita", age: 21, city: "Noida" };
const result = JSON.stringify(data);
console.log(result);

Output

{"name":"Nikita","age":21,"city":"Noida"}

Approach 2: Using JSON.stringify() with Indentation

In this approach, using JSON.stringify() in JavaScript, specifying optional parameters for indentation to format JSON data into a more readable and structured string representation for debugging or visualization.

Syntax:

const result = JSON.stringify(data, null, 2);

Example: In this example we are using the above-explained approach.

JavaScript

const data = { name: "Aman", age: 21, city: "Noida" };
const result = JSON.stringify(data, null, 2);
console.log(result);

Output

{
  "name": "Aman",
  "age": 21,
  "city": "Noida"
}

Approach 3: Using JSON.stringify() with Replacer Function

In this approach, we use JSON.stringify() with a custom replacer function in JavaScript to transform or omit specific values while converting JSON data to a string representation.

Syntax:

const result = JSON.stringify(data, (key, value) => {
    if (typeof value === "number") {
        // Modify number values
        return value * 2;
    }
    return value;
});

Example: In this example we are using the above-explained approach.

JavaScript

const data = { name: "Rahul", age: 30, city: "Delhi" };
const result = JSON.stringify(data, (key, value) => {
    if (typeof value === "number") {
        // Modify number values
        return value * 2;
    }
    return value;
});
console.log(result);

Output

{"name":"Rahul","age":60,"city":"Delhi"}

Approach 4: Using JSON.parse() followed by JSON.stringify() Method

In this approach, we convert JSON string to a JavaScript object using JSON.parse(), then convert the object back to a JSON string using JSON.stringify()

Syntax:

const jsonObject = JSON.parse(str1);
const result = JSON.stringify(jsonObject);

Example: In this example, we Parse str1 into a JavaScript object, store as jsonObject, then convert back to JSON string using JSON.stringify(jsonObject).

JavaScript

const str1 = '{"key1":"value1","key2":"value2"}';
const jsonObject = JSON.parse(str1);
const result = JSON.stringify(jsonObject);
console.log(result);

Output

{"key1":"value1","key2":"value2"}

Approach 5: Using a Custom Serializer Function

In this approach, we create a custom serializer function that allows more control over how the JSON data is converted to a string. This can include additional custom processing, such as handling special data types or applying specific transformations to the data.

Example: In this example, we create a custom function that converts Date objects to ISO strings and omits the ‘password’ property.

JavaScript

const data = {
    name: "John",
    age: 35,
    city: "New York",
    birthdate: new Date("1989-06-15"),
    password: "secret123"
};

function customStringify(obj) {
    return JSON.stringify(obj, (key, value) => {
        if (value instanceof Date) {
            return value.toISOString();
        }
        if (key === 'password') {
            return undefined;
        }
        return value;
    });
}

const result = customStringify(data);
console.log(result);

Output

{"name":"John","age":35,"city":"New York","birthdate":"1989-06-15T00:00:00.000Z"}

Approach 6: Using Template Literals

Using template literals to convert a JSON object to a string involves mapping over the object’s entries and formatting each key-value pair as a string. This approach leverages JavaScript’s Object.entries method and template literals for concise and readable code.

Example:

JavaScript

const jsonObj = { name: "John", age: 30 };

const jsonString = `{${Object.entries(jsonObj).map(([key, value]) =>
`"${key}":"${value}"`).join(',')}}`;

console.log(jsonString); // '{"name":"John","age":30}'