Welcome to the world of JSON formatting! Pretty-printing JSON allows you to present data in a more readable format, complete with indentation and colorization. In this blog post, we’ll explore how to easily convert JSON data into beautiful, structured HTML using the pretty-print-json library.

Setting Up

Regardless of whether you’re working with a web browser or a Node.js server, setting up this library is a breeze.

1. In a Web Browser

Start by loading the library from the jsDelivr CDN. Here’s how you can do it:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-print-json@3.0/dist/css/pretty-print-json.css">
<script src="https://cdn.jsdelivr.net/npm/pretty-print-json@3.0/dist/pretty-print-json.min.js"></script>

If you prefer dark mode, replace the CSS link with this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-print-json@3.0/dist/css/pretty-print-json.dark-mode.css">

2. In a Node.js Environment

Install the package using npm:

$ npm install pretty-print-json

Then, import it into your application:

import prettyPrintJson from 'pretty-print-json';

Usage Examples

Now that we’ve set up the library, let’s look at how to use it. Think of this process like painting a canvas: you take data, mix in some settings to adjust the look, and then reveal a masterpiece!

1. Basic API Usage

To convert your JSON data into HTML, use the following method:

const html = prettyPrintJson.toHtml(data, options);

2. Example Code Snippet

Let’s imagine you have some JSON data to display:

const data = {
    active: true,
    mode: "default",
    codes: [48348, 28923, 39080],
    city: "London"
};

To display this JSON in your HTML, just do the following:

const elem = document.getElementById('account');
elem.innerHTML = prettyPrintJson.toHtml(data);

3. Options Available

You can customize how your JSON is displayed by using the following options:

• indent: Number of spaces for indentation (default: 3).
• lineNumbers: Wrap HTML in an ol tag for line numbers (default: false).
• linkUrls: Create anchor tags for URLs (default: true).
• linksNewTab: Open links in new tabs (default: true).
• quoteKeys: Always double quote key names (default: false).
• trailingCommas: Append a comma after the last item (default: true).

Troubleshooting

If you encounter issues while implementing the pretty-print JSON library, consider the following troubleshooting tips:

• Ensure you have included all required files in your project. If using Node.js, verify your package installation with npm list.
• Check your console for any JavaScript errors that might indicate what went wrong.
• If the output isn’t displaying as expected, double-check your HTML element IDs and styles.
• Make sure your browser supports the features you’re utilizing, especially for dark mode options.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

Transforming JSON into a visually appealing format is simple with pretty-print-json. Whether it’s for debugging or presenting data, this library will make your work much easier.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.