Build a JSON Formatter or Beautifier in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

Build a JSON Formatter or Beautifier in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

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

 

 

<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

 

 

@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;
}

 

See also  JavaScript Program to Sort Array of Objects by Property Values Full Project For Beginners

 

 

And now make a script.js file and copy paste the following code

 

 

 

script.js

 

 

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"}}})

 

See also  Node.js FFMPEG Command to Convert PDF to MP4 Video in Command Line Using Javascript Full Project For Beginners

 

 

And now if you open the index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply