JavaScript Formatting JSON for Human Readability

Making JSON More Readable for Humans

Working with JSON is a typical activity for developers, particularly when working with APIs or data storage. However, raw JSON can be difficult to read and understand due to its lack of formatting. Proper indentation and spacing are essential for making JSON more approachable.

In this tutorial, we'll look at different ways to pretty-print JSON using JavaScript. We'll go over not only fundamental indentation and spacing strategies, but also how to improve readability using colors and font styles. This post will show you how to convert raw JSON into a human-friendly format.

Detailed Description of JSON Formatting Scripts

The first script is a frontend JavaScript solution designed to pretty-print JSON by adding indentation and applying color coding. The script starts with a function called prettyPrintJSON, which takes a JSON object as input. Inside this function, the JSON object is converted into a string with 2-space indentation using the JSON.stringify(json, null, 2) method. This ensures that the JSON is more readable by adding the necessary whitespace. To further enhance readability, the script uses a .replace(/(".*?"|null|true|false|\d+)/g, ...) method with a regular expression to match specific JSON elements like strings, numbers, booleans, and null values. Each matched element is wrapped in a tag with a corresponding class, allowing CSS to apply different colors to each data type. The formatted JSON string is then inserted into the document's body using document.body.innerHTML.

The second script is a backend solution that uses Node.js to pretty-print JSON. This script launches an HTTP server with http.createServer(...) and listens for incoming requests on a specified port with .listen(). The server responds to a request with a JSON object that has been prepared for readability. The JSON object is transformed to a string with indentation using JSON.stringify(json, null, 2). The response header indicates that the content type is JSON with res.writeHead(200, { 'Content-Type': 'application/json' }). Finally, the pretty-printed JSON string is provided to the client via res.end(). This script enables developers to rapidly view neatly formatted JSON output in their browser by simply visiting to the server address.

// Function to pretty-print JSON with indentation and colors
function prettyPrintJSON(json) {
  // Convert JSON object to string with 2-space indentation
  const jsonString = JSON.stringify(json, null, 2);
  // Replace specific characters for color coding
  return jsonString.replace(/(".*?"|null|true|false|\d+)/g, match => {
    let cls = "number";
    if (/^".*"$/.test(match)) {
      cls = "string";
    } else if (/true|false/.test(match)) {
      cls = "boolean";
    } else if (/null/.test(match)) {
      cls = "null";
    }
    return `<span class="${cls}">${match}</span>`;
  });
}
// JSON data
const jsonData = {
  "name": "John",
  "age": 30,
  "city": "New York",
  "isStudent": false
};
// Display formatted JSON
document.body.innerHTML = `<pre>${prettyPrintJSON(jsonData)}</pre>`;

const http = require('http');
const url = require('url');
// Function to pretty-print JSON
function prettyPrintJSON(json) {
  return JSON.stringify(json, null, 2);
}
// Create HTTP server
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'application/json' });
  // Sample JSON data
  const jsonData = {
    name: "John",
    age: 30,
    city: "New York",
    isStudent: false
  };
  // Send pretty-printed JSON
  res.end(prettyPrintJSON(jsonData));
}).listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

Improved JSON Readability with Additional Tools

While prior solutions relied on frontend and backend JavaScript ways to pretty-print JSON, there are more tools and techniques that can improve JSON readability. One popular way is to use browser extensions or online tools. Extensions such as JSONView and JSON Formatter can automatically format JSON in the browser, adding indentation and color coding to improve readability. These tools are especially beneficial for developers that frequently interface with APIs and need to quickly parse and comprehend JSON data without creating any additional code.

Another handy way is to utilize libraries like Highlight.js or Prism.js, which are built to handle syntax highlighting for a variety of computer languages, including JSON. These libraries can be used in web applications to dynamically format and highlight JSON data. Using Highlight.js allows you to apply predefined themes to JSON strings, making it easier to discern between different data kinds. Furthermore, incorporating such libraries into your development workflow can save time while ensuring consistent JSON formatting across multiple projects.