JavaScript JSON Color Formatter With Expandable Toggle

This Article Was Live On January 8th, 2023 And So Far Have: 0 Comments...
Last Updated on January 8th, 2023

This JavaScript code snippet helps you to create JSON formatted with a tree view. It uses JSON.stringify() method to convert a JavaScript object or value to a JSON string. You can input JSON data and view it in the well-formatted collapsible tree view.

Besides this, the interface comes with all necessary controls to load JSON data, expand, and reset input fields. The textarea, buttons, and other layouts of this tool can be customized with additional CSS according to your needs.

There are many code snippets available online or on many other blogs and websites, but everyone cannot optimize your blog or website, so you need some optimized code snippets. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready-to-use code and paste it where you want.

CLICK HERE TO SEE DEMO

Table of Contents

Features:

Light Weight.
Pure JavaScript.
Cross Browser.
No JQuery Files.
Fully Customizable.
Responsive.

How To Add JavaScript JSON Color Formatter With Expandable Toggle?

There are a few easy and understandable steps to achieve your desired functionality that we are gonna share below. Follow each step perfectly.

CSS:

<style type="text/css">
input, textarea {
display: block;
outline: 0;
border: 0;
}
input:focus, textarea:focus {
transition: 0.2s;
}
body {
background-color: #fff;
font-family: 'Open Sans', Helvetica, sans-serif;
}
.container {
width: 100%;
margin: 30px auto;
}
#first {
width: 350px;
float: left;
margin-left: 2%;
margin-right: 2%;
}
#two {
width: 100px;
float: left;
margin-right: 2%;
margin-left: 2%;
padding-top: 15%;
}
#three {
width: 680px;
float: left;
margin-left: 1%;
margin-top: -12px; 
}
.form__label {
display: block;
margin-bottom: 0.625em;
}
.form__label--hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.form__input {
width: 100%;
height: 560px; 
font-size: 1em;
padding: 0.83333em;
margin-bottom: 5px;
border: 6px solid #05bcaf;
border-radius: 0.4em;
background: #ebecec;
color: #656D78;
font-weight: 300;
}
.form__modal {
width: 83%;
font-size: 1em;
padding: 0.83333em;
margin-bottom: 5px;
border-bottom: 6px solid #05bcaf;
border-radius: 0.4em;
background: #ebecec;
color: #656D78;
font-weight: 300;
}
.load-json, .reset, .collapse, .expand, [type^="button"] {
padding: 0.9375em 1.875em;
border: 0;
border-radius: 0.4em;
color: #fff;
text-transform: uppercase;
font-size: 0.875em;
font-weight: 400;
transition: opacity 0.2s;
display: block;
width: 100%;
}
.load-json:hover, .reset:hover, .collapse:hover, .expand:hover, [type^="button"]:hover {
opacity: 0.75;
cursor: pointer;
}
.load-json {
background-color: #3BAFDA;
}
.reset {
background-color: #e87376;
}
.collapse {
background-color: #D770AD;
}
.expand {
background-color: #F6BB42;
}
[type^="button"] {
margin-bottom: 1.42857em; 
width: 120px;
margin-right: 0.625em;
outline:none;
}
.json-viewer {
display: inline-block;
overflow: scroll;
height: 563px;
width: 600px;
color: #656D78;
padding: 10px 10px 10px 20px;
background-color: #ebecec;
border: 6px solid #05bcaf;
border-radius: 0.4em;
margin-bottom: 3px;
}
.json-viewer ul {
list-style-type: none;
margin: 0;
margin: 0 0 0 1px;
border-left: 3px dotted #ccc;
padding-left: 2em;
}
.json-viewer .hide {
display: none;
}
.json-viewer ul li .type-string,
.json-viewer ul li .type-date {
color: #05bcaf;
}
.json-viewer ul li .type-boolean {
color: #F6BB42;
font-weight: bold;
}
.json-viewer ul li .type-number {
color: #e87376;
}
.json-viewer ul li .type-null {
color: #EC87C0;
}
.json-viewer a.list-link {
color: #656D78;
text-decoration: none;
position: relative;
}
.json-viewer a.list-link:before {
color: #aaa;
content: "\25BC";
position: absolute;
display: inline-block;
width: 1em;
left: -1em;
}
.json-viewer a.list-link.collapsed:before {
content: "\25B6";
}
.json-viewer a.list-link.empty:before {
content: "";
}
.json-viewer .items-ph {
color: #aaa;
padding: 0 1em;
}
.json-viewer .items-ph:hover {
text-decoration: underline;
}
</style>

HTML:

<div class="container">
<div id="first">
<form class="form">
<label class="form__label--hidden" for="msg">Input json:</label>
<textarea class="form__input" class="form__input" id="msg" placeholder="Input json..." rows="6"></textarea>
</form>
</div>
<div id="two">
<button type="button" class="load-json">Load</button>
<button type="button" class="collapse">Collapse</button>
<button type="button" class="expand">Expand</button>
<button type="button" class="reset">Reset</button>
</div>
<div id="three">
<div id="json"></div>
</div>
</div>

JavaScript:

<script type="text/javascript">
JSONViewer = (function() {
var JSONViewer = function() {
this._dom = {};
this._dom.container = document.createElement("pre");
this._dom.container.classList.add("json-viewer");
};
JSONViewer.prototype.showJSON = function(json, maxLvl, colAt) {
maxLvl = typeof maxLvl === "number" ? maxLvl : -1; // max level
colAt = typeof colAt === "number" ? colAt : -1; // collapse at

var jsonData = this._processInput(json);
var walkEl = this._walk(jsonData, maxLvl, colAt, 0);

this._dom.container.innerHTML = "";
this._dom.container.appendChild(walkEl);
};

/**
* Get container with pre object - this container is used for visualise JSON data.
* 
* @return {Element}
*/
JSONViewer.prototype.getContainer = function() {
return this._dom.container;
};

/**
* Process input JSON - throws exception for unrecognized input.
* 
* @param {Object|Array} json Input value
* @return {Object|Array}
*/
JSONViewer.prototype._processInput = function(json) {
if (json && typeof json === "object") {
return json;
}
else {
throw "Input value is not object or array!";
}
};

/**
* Recursive walk for input value.
* 
* @param {Object|Array} value Input value
* @param {Number} maxLvl Process only to max level, where 0..n, -1 unlimited
* @param {Number} colAt Collapse at level, where 0..n, -1 unlimited
* @param {Number} lvl Current level
*/
JSONViewer.prototype._walk = function(value, maxLvl, colAt, lvl) {
var frag = document.createDocumentFragment();
var isMaxLvl = maxLvl >= 0 && lvl >= maxLvl;
var isCollapse = colAt >= 0 && lvl >= colAt;

switch (typeof value) {
case "object":
if (value) {
var isArray = Array.isArray(value);
var items = isArray ? value : Object.keys(value);

if (lvl === 0) {
// root level
var rootCount = this._createItemsCount(items.length);
// hide/show
var rootLink = this._createLink(isArray ? "[" : "{");

if (items.length) {
rootLink.addEventListener("click", function() {
if (isMaxLvl) return;

rootLink.classList.toggle("collapsed");
rootCount.classList.toggle("hide");

// main list
this._dom.container.querySelector("ul").classList.toggle("hide");
}.bind(this));

if (isCollapse) {
rootLink.classList.add("collapsed");
rootCount.classList.remove("hide");
}
}
else {
rootLink.classList.add("empty");
}

rootLink.appendChild(rootCount);
frag.appendChild(rootLink);
}

if (items.length && !isMaxLvl) {
var len = items.length - 1;
var ulList = document.createElement("ul");
ulList.setAttribute("data-level", lvl);
ulList.classList.add("type-" + (isArray ? "array" : "object"));

items.forEach(function(key, ind) {
var item = isArray ? key : value[key];
var li = document.createElement("li");

if (typeof item === "object") {
var isEmpty = false;

// null && date
if (!item || item instanceof Date) {
li.appendChild(document.createTextNode(isArray ? "" : key + ": "));
li.appendChild(this._createSimple(item ? item : null));
}
// array & object
else {
var itemIsArray = Array.isArray(item);
var itemLen = itemIsArray ? item.length : Object.keys(item).length;

// empty
if (!itemLen) {
li.appendChild(document.createTextNode(key + ": " + (itemIsArray ? "[]" : "{}")));
}
else {
// 1+ items
var itemTitle = (typeof key === "string" ? key + ": " : "") + (itemIsArray ? "[" : "{");
var itemLink = this._createLink(itemTitle);
var itemsCount = this._createItemsCount(itemLen);

// maxLvl - only text, no link
if (maxLvl >= 0 && lvl + 1 >= maxLvl) {
li.appendChild(document.createTextNode(itemTitle));
}
else {
itemLink.appendChild(itemsCount);
li.appendChild(itemLink);
}

li.appendChild(this._walk(item, maxLvl, colAt, lvl + 1));
li.appendChild(document.createTextNode(itemIsArray ? "]" : "}"));

var list = li.querySelector("ul");
var itemLinkCb = function() {
itemLink.classList.toggle("collapsed");
itemsCount.classList.toggle("hide");
list.classList.toggle("hide");
};

// hide/show
itemLink.addEventListener("click", itemLinkCb);

// collapse lower level
if (colAt >= 0 && lvl + 1 >= colAt) {
itemLinkCb();
}
}
}
}
// simple values
else {
// object keys with key:
if (!isArray) {
li.appendChild(document.createTextNode(key + ": "));
}

// recursive
li.appendChild(this._walk(item, maxLvl, colAt, lvl + 1));
}

// add comma to the end
if (ind < len) {
li.appendChild(document.createTextNode(","));
}

ulList.appendChild(li);
}, this);

frag.appendChild(ulList);
}
else if (items.length && isMaxLvl) {
var itemsCount = this._createItemsCount(items.length);
itemsCount.classList.remove("hide");

frag.appendChild(itemsCount);
}

if (lvl === 0) {
// empty root
if (!items.length) {
var itemsCount = this._createItemsCount(0);
itemsCount.classList.remove("hide");

frag.appendChild(itemsCount);
}

// root cover
frag.appendChild(document.createTextNode(isArray ? "]" : "}"));

// collapse
if (isCollapse) {
frag.querySelector("ul").classList.add("hide");
}
}
break;
}

default:
// simple values
frag.appendChild(this._createSimple(value));
break;
}

return frag;
};

/**
* Create simple value (no object|array).
* 
* @param {Number|String|null|undefined|Date} value Input value
* @return {Element}
*/
JSONViewer.prototype._createSimple = function(value) {
var spanEl = document.createElement("span");
var type = typeof value;
var txt = value;

if (type === "string") {
txt = '"' + value + '"';
}
else if (value === null) {
type = "null";
txt = "null";
}
else if (value === undefined) {
txt = "undefined";
}
else if (value instanceof Date) {
type = "date";
txt = value.toString();
}

spanEl.classList.add("type-" + type);
spanEl.innerHTML = txt;

return spanEl;
};

/**
* Create items count element.
* 
* @param {Number} count Items count
* @return {Element}
*/
JSONViewer.prototype._createItemsCount = function(count) {
var itemsCount = document.createElement("span");
itemsCount.classList.add("items-ph");
itemsCount.classList.add("hide");
itemsCount.innerHTML = this._getItemsTitle(count);

return itemsCount;
};

/**
* Create clickable link.
* 
* @param {String} title Link title
* @return {Element}
*/
JSONViewer.prototype._createLink = function(title) {
var linkEl = document.createElement("a");
linkEl.classList.add("list-link");
linkEl.href = "javascript:void(0)";
linkEl.innerHTML = title || "";

return linkEl;
};

/**
* Get correct item|s title for count.
* 
* @param {Number} count Items count
* @return {String}
*/
JSONViewer.prototype._getItemsTitle = function(count) {
var itemsTxt = count > 1 || count === 0 ? "items" : "item";

return (count + " " + itemsTxt);
};

return JSONViewer;
})();
var jsonObj = {};
var jsonViewer = new JSONViewer();
document.querySelector("#json").appendChild(jsonViewer.getContainer());
var textarea = document.querySelector("textarea");

// textarea value to JSON object
var setJSON = function () {
try {
var value = textarea.value;
jsonObj = JSON.parse(value);
}
catch (err) {
alert(err);
}
};

var loadJsonBtn = document.querySelector("button.load-json");
var collapseBtn = document.querySelector("button.collapse");
var expandBtn = document.querySelector("button.expand");
var resetBtn = document.querySelector("button.reset");

loadJsonBtn.addEventListener("click", function () {
setJSON();
jsonViewer.showJSON(jsonObj);
});

collapseBtn.addEventListener("click", function () {
jsonViewer.showJSON(jsonObj, null, 1);
});

expandBtn.addEventListener("click", function () {
setJSON();
jsonViewer.showJSON(jsonObj);
});

resetBtn.addEventListener("click", function () {
document.getElementById("msg").value = "";
});

</script>

Customization:

No need to customize it. Just copy-paste. Rest edit the code as per comments and need.

Recommended For You:

Pure Vanilla JavaScript Image Lightbox With Custom Controls

Troubleshooting the Errors:

Do it with concentration and patience. Check your all steps again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.

Final Words:

That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us If you have any doubts or problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave.