Beautifying JSON Output In JavaScript

Beautifying JSON output in JavaScript typically refers to formatting JSON data in a human-readable way with proper indentation and line breaks. Here’s how you can achieve this:

Using JSON.stringify#

JavaScript provides a built-in method JSON.stringify() that converts JavaScript objects into JSON strings. By using additional parameters, you can control how the JSON output is formatted:

1. Indentation: You can specify the number of spaces for each level of indentation.
2. Line breaks: Adding line breaks makes the output more readable.

Example:#

let data = {
  name: "John Doe",
  age: 30,
  city: "New York",
};

// Convert object to JSON string with indentation and line breaks
let jsonString = JSON.stringify(data, null, 2);
console.log(jsonString);

In this example:

• data is a JavaScript object.
• JSON.stringify(data, null, 2) converts data into a JSON string with:
  • null as the replacer function (which means all properties that are not explicitly filtered out will be included),
  • 2 as the number of spaces used for indentation.

Output:#

{
  "name": "John Doe",
  "age": 30,
  "city": "New York"
}

Using JSON.stringify with Additional Parameters#

You can adjust JSON.stringify to provide more control over the output format:

• Spaces Parameter: Controls the indentation level.
• Replacer Function: Allows you to filter and transform the output.

Example with replacer function:#

let data = {
  name: "John Doe",
  age: 30,
  city: "New York",
};

// Convert object to JSON string with custom replacer and indentation
let jsonString = JSON.stringify(
  data,
  (key, value) => {
    if (typeof value === "string") {
      return value.toUpperCase(); // Transform all string values to uppercase
    }
    return value;
  },
  2
);

console.log(jsonString);

Output with replacer function:#

{
  "name": "JOHN DOE",
  "age": 30,
  "city": "NEW YORK"
}

Conclusion#

Using JSON.stringify() with the appropriate parameters (replacer and space) allows you to control how JSON data is formatted. This is useful for debugging, logging, or any situation where human-readable JSON output is needed. Adjust the parameters according to your specific requirements for indentation, line breaks, and content transformation.