JavaScript: How to Pretty Print Object

Best Solution: Using JSON.stringify()

To display an object in a more readable format in JavaScript, you can use the JSON.stringify() method with additional parameters. The third parameter of this function is the number of spaces used for indentation.

Here’s an example:

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

In this example, JSON.stringify(obj, null, 2) converts the object into a string in a pretty printed format with 2 spaces of indentation. This makes the output more readable in the console.

The output will be:

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

This approach makes it easier to read the logged object, especially when dealing with large objects.
For the most part, this is the only method that you’ll need to display JavaScript objects in a readable format. But for the sake of completeness, let’s explore all the other options.

Using console.dir()

console.dir() is a method in JavaScript that allows you to display an interactive list of the properties of the specified JavaScript object. This can be particularly useful when you want to visualize the full structure of an object in the console.

Here’s how you can use console.dir() to pretty print a JavaScript object:

// Define your object
let obj = { name: "John", age: 30, city: "New York" };

// Use console.dir() to pretty print the object
console.dir(obj, { depth: null, colors: true });

In this example, we’re passing two options to console.dir():

• depth: null tells it to print properties of the object to any depth, rather than cutting off after a certain level.
• colors: true tells it to stylize the output with ANSI color codes. This can make the output easier to read.

When you run this code, your console will display a colorful, detailed view of all properties of the object. However, please note that the colors option may not work in all environments.

This makes console.dir() an excellent tool for debugging, as it allows you to see the full contents of objects, including any nested objects they may contain.

Using console.table()

console.table() is a method in JavaScript that allows you to display tabular data as a table. It makes the output more readable, especially when dealing with large objects or arrays.

Here’s how you can use console.table() to pretty print a JavaScript object:

// Define your object
let obj = { name: "John", age: 30, city: "New York" };

// Use console.table() to pretty print the object
console.table(obj);

When you run this code, your console will display the object properties as a table. The left column contains the property names, and the right column contains their respective values.

This method is particularly useful for displaying arrays of objects, where each object has the same set of properties.

For example:

let people = [{ name: "John", age: 30, city: "New York" }, 
              { name: "Jane", age: 28, city: "Chicago" }];

console.table(people);

When this code is executed, the console will display a table with columns for “name”, “age”, and “city”, and rows for each person in the array.

console.table() provides an organized, easy-to-read view of your data, making it a great tool for debugging and data analysis.

Using a custom function

While a little bit uncommon, but there are cases where you want to pretty print an object in a specific format. In these cases, you can create a custom function to log objects in the format that suits your needs.

function printObject(obj) {
  for (let key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      console.log(key + ': ');
      printObject(obj[key]);
    } else {
      console.log(key + ': ' + obj[key]);
    }
  }
}

let obj = { name: "John", age: 30, city: "New York" };
printObject(obj);
// Output: 
// name: John
// age: 30
// city: New York

The example above shows you how you can create a custom function that prints properties and values of JavaScript objects in a custom format. Feel free to modify this function for your use case.