Display JSON in a Clean Format with JavaScript

Other Questions JavaScript Closures
1

I need a method to render JSON in a format that is easy for humans to read. Specifically, I’m interested in techniques that add structured indentation, line breaks, and possibly incorporate style enhancements like distinct colors or font changes to highlight different data sections. For instance, one might consider a solution like the example below:

function formatData(objectInput) {
  let beautifiedData = JSON.stringify(objectInput, null, 3);
  return beautifiedData;
}

const testObject = { userId: 101, userName: 'Alice', details: { status: 'active', role: 'admin' } };
console.log(formatData(testObject));

Any additional ideas or tips to further refine the output would be welcomed.

2

The approach outlined in the question works well for basic formatting. In my experience, a more interactive solution that incorporates a visual element provides additional benefits. For example, using a web-based interface and associated styling via CSS can make nested objects easier to navigate and understand. I’ve implemented reusable components that leverage JSON.parse after beautification to make the details collapsible. This way, one can drill down into the data without being overwhelmed by lengthy output while still benefiting from the simple readability provided by JSON.stringify.