Welcome folks today in this blog post we will be building a json formatter or beautifier
in browser using javascript
.All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html
file and copy paste the following code
index.html
1 2 3 4 5 6 7 8 9 10 |
<div class="heading">{JSON} Formatter</div> <div class="app"> <div id="inputWrapper"> <textarea class="input"></textarea> </div> <div id="result"> </div> </div> |
Now make a style.css
file and copy paste the following cod
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono); html, body{ height: 100%; overflow: hidden; } * { box-sizing: border-box; } .app{ display: flex; flex-direction: row; height: calc(100% - 75px); } #inputWrapper, #result{ width: calc(100% - 10px); border: 1px solid #ececec; position: relative; margin: 15px 5px; } #result{ overflow:auto; padding: 10px; } #inputWrapper:before, #result:before{ content: ""; position: absolute; width: 100%; box-shadow: 1px 3px 3px 1px #ececec; top:100%; } .input { width: 100%; height: 100%; border: none; outline: none; resize: none; font-size: inherit; font-size: 1.2em; padding: 10px; } .heading{ font-size: 2em; text-align: center; margin: 10px auto 15px auto; font-family: 'Roboto Mono', monospace; } .Node{ font-size: 18px; } .KeyValue{ position: relative; margin-left: 20px; } .KeyValueWrapper{ transition: background-color 0.1s; } .KeyValueWrapperBG{ background-color: rgba(0, 255, 0, 0.1); } .Key { font-size: 16px; color: #A0ECBE; } .PrimitiveValue{ color: #3498DB; } .Separator{ font-size: 12px; color: #999; margin: auto 3px auto 1px; } .ToggleButton{ font-size: 9px; width: 13px; height: 13px; padding: 0; transform: translate(0, -2px); border: 1px solid paleturquoise; border-radius: 5px; margin-right: 3px; outline: none; } .TogglePlaceholder{ display: none; } |
And now make a script.js
file and copy paste the following code
script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
var input = document.querySelector("#inputWrapper textarea") var result = document.querySelector("#result") function JSONPrettifier(input, output){ this.input = input this.output = output } JSONPrettifier.prototype.emptyOutputContainer = function(){ while(this.output.children.length){ this.output.removeChild(this.output.firstChild) } } JSONPrettifier.prototype.setResult = function(message){ console.log(message) this.emptyOutputContainer() this.output.appendChild(message) } JSONPrettifier.prototype.handleToggleClick = function(e){ const level = Number(e.target.dataset.level)+1, KeyValueWrapper = document.querySelector(".KeyValueWrapper[data-level='"+level+"']"), TogglePlaceholder = document.querySelector(".TogglePlaceholder[data-level='"+ level +"']") if(KeyValueWrapper.style.display === "none"){ KeyValueWrapper.style.display = "block" TogglePlaceholder.style.display = "none" } else{ KeyValueWrapper.style.display = "none" TogglePlaceholder.style.display = "inline" } } JSONPrettifier.prototype.handleMouseEnter = function(e){ let level = Number(e.target.dataset.level) + 1, KeyValueWrapper = document.querySelector(".KeyValueWrapper[data-level='"+level+"']") KeyValueWrapper.classList.add("KeyValueWrapperBG") while(--level > 0){ KeyValueWrapper = document.querySelector(".KeyValueWrapper[data-level='"+level+"']") KeyValueWrapper.classList.remove("KeyValueWrapperBG") } } JSONPrettifier.prototype.handleMouseLeave = function(e){ let level = Number(e.target.dataset.level) + 1, KeyValueWrapper = document.querySelector(".KeyValueWrapper[data-level='"+level+"']") KeyValueWrapper.classList.remove("KeyValueWrapperBG") } JSONPrettifier.prototype.createElement = function(type, level, value){ if(type === "Node" || type === "KeyValue" || type === "KeyValueWrapper"){ const div = document.createElement("div") div.setAttribute("class", type) div.setAttribute("data-level", level) if(type === "Node"){ div.addEventListener("mouseenter", this.handleMouseEnter.bind(this)) div.addEventListener("mouseleave", this.handleMouseLeave.bind(this)) } return div } if(type === "NodeStart" || type === "NodeEnd"){ const span = document.createElement("span") let value if(type === "NodeStart"){ value = "{" } if(type === "NodeEnd"){ value = "}" } const t = document.createTextNode(value) span.appendChild(t) span.setAttribute("class", type) span.setAttribute("data-level", level) return span } if(type === "PrimitiveValue" || type === "Key" || type === "Separator"){ const span = document.createElement("span") const t = document.createTextNode(value) span.appendChild(t) span.setAttribute("class", type) span.setAttribute("data-level", level) return span } if(type === "Error"){ const span = document.createElement("span") const t = document.createTextNode(level) span.appendChild(t) span.setAttribute("class", type) return span } if(type === "ToggleButton"){ const button = document.createElement("button") const t = document.createTextNode("+") button.appendChild(t) button.setAttribute("data-level", level) button.setAttribute("class", type) button.addEventListener("click", this.handleToggleClick.bind(this)) return button } if(type === "TogglePlaceholder"){ const span = document.createElement("span") const t = document.createTextNode("...") span.appendChild(t) span.setAttribute("class", type) span.setAttribute("data-level", level) return span } } JSONPrettifier.prototype.process = function(json, level){ if(typeof json !== "object"){ return this.createElement("PrimitiveValue", level, json) } const parent = this.createElement("Node", level) parent.appendChild(this.createElement("ToggleButton", level)) parent.appendChild(this.createElement("NodeStart", level)) const KeyValueWrapper = this.createElement("KeyValueWrapper", level+1) for(key in json){ const keyvalue = this.createElement("KeyValue", level+1) keyvalue.appendChild(this.createElement("Key", level+1, key)) keyvalue.appendChild(this.createElement("Separator", level+1, ":")) keyvalue.appendChild(this.process(json[key], level + 1)) KeyValueWrapper.appendChild(keyvalue) } parent.appendChild(KeyValueWrapper) parent.appendChild(this.createElement("TogglePlaceholder", level+1)) parent.appendChild(this.createElement("NodeEnd", level)) return parent } JSONPrettifier.prototype.listenChanges = function(e){ this.startProcessing(e.target.value) } JSONPrettifier.prototype.startProcessing = function(text){ var json = null try{ json = JSON.parse(text) } catch(e){ this.setResult(this.createElement("Error","Not valid json")) } if(json){ this.setResult(this.process(json, 0)) } } JSONPrettifier.prototype.init = function(initialObj){ this.input.addEventListener("input", this.listenChanges.bind(this)) if(initialObj){ this.input.value = JSON.stringify(initialObj) this.startProcessing(JSON.stringify(initialObj)) } } var jSONPrettifier = new JSONPrettifier(input, result) jSONPrettifier.init({"foo":"bar","baz":{"bar":"foo", "yo": {"yay": "hey"}}}) |
And now if you open the index.html
file inside the browser you will see the below screenshot