How to Format JSON in JavaScript (Pretty Print & Stringify)

Introduction

JSON (JavaScript Object Notation) is the standard format for data exchange on the web. While it's easy for machines to parse, raw JSON can be difficult for humans to read, especially when it's minified into a single long line. In this guide, we'll explore how to format JSON in JavaScript for better readability.

Using JSON.stringify() for Pretty Printing

The most common way to format JSON in JavaScript is using the built-in JSON.stringify() method. Most developers use it with one argument, but it actually accepts three:

JSON.stringify(value, replacer, space)

To "pretty-print" your JSON, you can use the space argument. This defines the number of spaces to use for indentation.

const data = { name: "John", age: 30, city: "New York" };
const prettyJson = JSON.stringify(data, null, 2);
console.log(prettyJson);
      

Parsing JSON with JSON.parse()

Before you can format a JSON string, you often need to parse it into a JavaScript object first. JSON.parse() takes a JSON string and transforms it into an object.

const jsonString = '{"name":"John","age":30}';
const obj = JSON.parse(jsonString);
      

Common Mistakes

• Circular References: JSON.stringify will throw an error if the object contains circular references.
• Undefined Values: JSON does not support undefined. These values will be omitted from the output.

When to Use an Online Formatter

While coding solutions are great, sometimes you just need a quick way to visualize data. Our JSON Formatter tool allows you to paste any JSON and instantly see a beautified version with syntax highlighting and tree views.