2023 January 08 Archive - EXEIdeas – Let's Your Mind Rock

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 DEMOFeatures: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: 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;} HTML: Input json: Load Collapse Expand Reset 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 levelcolAt = typeof colAt === "number" ? colAt : -1; // collapse atvar 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 levelvar rootCount = this._createItemsCount(items.length);// hide/showvar rootLink = this._createLink(isArray ? "[" : "{");if (items.length) {rootLink.addEventListener("click", function() {if (isMaxLvl) return;rootLink.classList.toggle("collapsed");rootCount.classList.toggle("hide");// main listthis._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 && dateif (!item || item instanceof Date) {li.appendChild(document.createTextNode(isArray ? "" : key + ": "));li.appendChild(this._createSimple(item ? item : null));}// array & objectelse {var itemIsArray = Array.isArray(item);var itemLen = itemIsArray ? item.length : Object.keys(item).length;// emptyif (!itemLen) {li.appendChild(document.createTextNode(key + ": " + (itemIsArray ? "[]" : "{}")));}else {// 1+ itemsvar itemTitle = (typeof key === "string" ? key + ": " : "") + (itemIsArray ? "[" : "{");var itemLink = this._createLink(itemTitle);var itemsCount = this._createItemsCount(itemLen);// maxLvl - only text, no linkif (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/showitemLink.addEventListener("click", itemLinkCb);// collapse lower levelif (colAt >= 0 && lvl + 1 >= colAt) {itemLinkCb();}}}}// simple valueselse {// object keys with key:if (!isArray) {li.appendChild(document.createTextNode(key + ": "));}// recursiveli.appendChild(this._walk(item, maxLvl, colAt, lvl + 1));}// add comma to the endif (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 rootif (!items.length) {var itemsCount = this._createItemsCount(0);itemsCount.classList.remove("hide");frag.appendChild(itemsCount);}// root coverfrag.appendChild(document.createTextNode(isArray ? "]" : "}"));// collapseif (isCollapse) {frag.querySelector("ul").classList.add("hide");}}break;}default:// simple valuesfrag.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 objectvar 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 = "";}); Customization:No need to customize it. Just copy-paste. Rest edit the code as per comments and need.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.