Pretty Print JSON

by Kyle Mitofsky

HTML

<input type="text" name="cat"     value="frida" />
<input type="text" name="dog"     value="buddy" /><br/>
<input type="text" name="food"    value="pizza" />
<input type="text" name="dessert" value="ice cream" />

<pre id="formdata"></pre>











<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
  About these SO Questions
  <ul>
    <li><a href="https://stackoverflow.com/q/4810841/1366033">
      How can I pretty-print JSON using JavaScript?
    </a></li>
    <li><a href="https://stackoverflow.com/q/2614862/1366033">
      How can I beautify JSON programmatically?
    </a></li>
    <li><a href="https://stackoverflow.com/q/3515523/1366033">
     Javascript: How to generate formatted easy-to-read JSON straight from an object?
    </a></li>
    <li><a href="https://stackoverflow.com/q/1380462/1366033">
      How do I write json results to a div using jquery?
    </a></li>
  </ul>
</div>

CSS

pre {
  padding: 15px;
  background: lightgrey;
}

JavaScript

// listener
$(":input").on("keyup change", WriteFormDataToDiv);

// call on load
WriteFormDataToDiv()

function WriteFormDataToDiv() {
  var data = $(":input").serializeArray()
  var html = JSON.stringify(data, null, 2)
  $("#formdata").html(html)
}