Rendering JSON data in HTML

Photo by Warren Wong on Unsplash

Tired of teaching your non-IT colleagues how to see what they got as a result from the API? Or are you yourself tired of opening the console?

Try displaying them in HTML using “Renderjson”.

Renderjson is a simple JavaScript package which render JSON into collapsible, themeable HTML. It can be used as debugging tool, however you are the boss and you can use it wherever it is useful.

Renderjson example

The code renders the JSON lazily, only building the HTML when the user reveals the JSON by clicking the disclosure icons. This makes it extremely fast to do the initial render of huge JSON objects, since the only thing that renders initially is a single disclosure icon.

Installing Plugin:

npm i renderjson

Example Usage:

<div **id** ="test"></div>

<script **type** ="text/javascript" **src** ="renderjson.js"></script>

<script>

document.getElementById("test").appendChild(

renderjson({ hello **:** [1,2,3,4], there **:** { a **:** 1, b **:** 2, c **:** ["hello", null] } })

);

</script>

Just call the library in whatever way/tech you are using and then append the result of the JSON data passed on to renderjson() function. It takes in the JSON you want to render as a single argument and returns an HTML element.

Options:

Call set_show_to_level() to show different amounts of the JSON by default. The default is 0, and 1 is a popular choice. As a special case, if level is the string "all" then all the JSON will be shown by default. This, of course, removes the benefit of the lazy rendering, so it may be slow with large JSON objects.

renderjson.set\_show\_to\_level(level);

Other options are discussed in the plugin page: https://www.npmjs.com/package/renderjson#options

References used are from the plugin’s official website: https://github.com/caldwell/renderjson

---