Pretty/Style/Indent JSON String in HTML DIV/PRE Tag in Javascript/jQuery

Pretty/Style/Indent JSON String in HTML DIV/PRE Tag in Javascript/jQuery

Pretty/Style/Indent JSON String in HTML DIV/PRE Tag in Javascript/jQuery

         We come across many situations where we need to display JSON string (pretty/Style/Indent format) inside HTML DIV(<div></div>) tag. The below Javascript code snippet can be used to achieve what you need.

 HTML Code

<pre id="json"></pre>
//DIV tag wont work

 Javascript Code

var data = {
     "data": {
          "attribute1": "value1",
          "attribute2": "value2",
     },
     "attribute3": "value3"
};
document.getElementById("json").innerHTML = JSON.stringify(data, undefined, 2);
OR
$("#json").html(JSON.stringify(data, undefined, 2)); // For jQuery

Output

{
  "data": {
    "attribute1": "value1",
    "attribute2": "value2"
  },
  "attribute3": "value3"
}

          If you want to indent more, increase the value 2 in function JSON.stringify().

[ YOU MAY ALSO LIKE ]

Leave a Reply