07 October 2023

How to Pretty Print JSON with React

web

To pretty print JSON with React, you can use the JSON.stringify() method. By passing a JSON object as the first argument, null as the second, and the number 2 as the third argument, you get back a string representation of the JSON object that’s beautifully formatted and easy on the eyes.

What is Pretty Printing?

Pretty printing refers to the process of formatting data in a way that’s readable to humans. With JSON, this means organizing nested structures with indentation and laying out key-value pairs in an orderly fashion. This transforms a potential jumble of brackets and commas into a structured, legible format.

Create a Sample JSON

Here’s a sample JSON we’ll be working with:

const sampleJSON = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    zip: "12345"
  },
  hobbies: ["reading", "coding", "hiking"]
};

Implement the JSON Pretty Print in a React Component

With our JSON in place, let’s create a React component to showcase it:

import React from 'react';

const JSONPrettyPrint = () => {
  const jsonData = JSON.stringify(sampleJSON, null, 2);

  return (
    <pre>
      {jsonData}
    </pre>
  );
}

export default JSONPrettyPrint;

The JSON.stringify method, as we discussed in the introduction, is central to this process. Using the <pre> HTML tag ensures that our data is displayed as preformatted text, making it far more readable.

Render the Component

In your App.js or the main component, include the JSONPrettyPrint component:

import React from 'react';
import './App.css';
import JSONPrettyPrint from './JSONPrettyPrint';

function App() {
  return (
    <div className="App">
      <h1>JSON Pretty Print with React</h1>
      <JSONPrettyPrint />
    </div>
  );
}

export default App;

JSON.stringify() Arguments

In the context of the JSON.stringify() method, both the null value and the number 2 have specific roles to play.

Let’s break them down:

The null Argument: The Replacer Function

JSON.stringify() can take up to three arguments: the value to convert, a replacer function, and a space value. The second argument is the replacer function, and it’s quite powerful.

In simple terms, the replacer function is a filter mechanism that controls which properties are included in the JSON string output. If you provide a function as the second argument, JSON.stringify() will call this function for each item in the JSON object, allowing you to manipulate the value or even exclude it from the final string.

When you pass null as the second argument, like in our previous example, you’re essentially saying, “Don’t use any custom filtering, just stringify everything as is.”

Example with a Replacer Function:

const person = {
  name: 'John',
  age: 25,
  password: 'secret'
};

const jsonString = JSON.stringify(person, (key, value) => {
  if (key === 'password') return undefined;
  return value;
});

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

In the above example, the replacer function is excluding the password property from the final string.

The Number 2: Spacing

The third argument of JSON.stringify() determines the spacing used in the resultant string. It’s meant for beautifying the output.

When you provide the number 2, it indicates that each level in the JSON output should be indented with 2 spaces. This makes the JSON structure much more readable for humans.

Example:

Without spacing:

{"name":"John","age":25}

With spacing of 2:

{
  "name": "John",
  "age": 25
}

As you can see, the version with spacing is much easier to read.

In conclusion, the null and 2 arguments in JSON.stringify() ensure that the entire object is stringified without any custom modifications, but with a neat, indented structure that’s user-friendly.

Conclusion

And there you go! With this straightforward method, you can easily pretty print JSON in React.

07 October 2023