Search code examples
javascripthtmlcssjsonpretty-print

PrettyPrinting JSON in UI

I have a JSON String like this

{"menu":{"header":"SVG Viewer","items":[{"id":"Open"},
{"id":"OpenNew","label":"Open New"},null,{"id":"ZoomIn","label":"Zoom In"},
{"id":"ZoomOut","label":"Zoom Out"},{"id":"OriginalView","label":"Original 
View"},null,{"id":"Quality"},{"id":"Pause"},{"id":"Mute"},null,
{"id":"Find","label":"Find..."},{"id":"FindAgain","label":"Find Again"},
{"id":"Copy"},{"id":"CopyAgain","label":"Copy Again"},
{"id":"CopySVG","label":"Copy SVG"},{"id":"ViewSVG","label":"View SVG"},
{"id":"ViewSource","label":"View Source"},{"id":"SaveAs","label":"Save 
As"},null,{"id":"Help"},{"id":"About","label":"About Adobe CVG 
Viewer..."}]}}

I am displaying the above block of JSON String inside 

<pre><code></code></pre>

My Code:

<!DOCTYPE html>
 <html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>

<link rel="stylesheet" href="SpecificToJSON/highlight/styles/default.css">
    <script src="SpecificToJSON/highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div class="container">
<pre class="json"><code>
 {"menu":{"header":"SVG Viewer","items":[{"id":"Open"},
 {"id":"OpenNew","label":"Open New"},null,{"id":"ZoomIn","label":"Zoom In"},
 {"id":"ZoomOut","label":"Zoom Out"},{"id":"OriginalView","label":"Original 
 View"},null,{"id":"Quality"},{"id":"Pause"},{"id":"Mute"},null,
 {"id":"Find","label":"Find..."},{"id":"FindAgain","label":"Find Again"},
 {"id":"Copy"},{"id":"CopyAgain","label":"Copy Again"},
 {"id":"CopySVG","label":"Copy SVG"},{"id":"ViewSVG","label":"View SVG"},
 {"id":"ViewSource","label":"View Source"},{"id":"SaveAs","label":"Save 
  As"},null,{"id":"Help"},{"id":"About","label":"About Adobe CVG 
  Viewer..."}]}}
 </code></pre>
 </div>
 </body>
  </html>

What i am getting :enter image description here

What i NEED :

enter image description here

How to achieve this? Thanks in Advance.

Solution

  • If it's a JavaScript object, equivalent to this;

    var obj = {"menu":{"header":"SVG Viewer","items":[{"id":"Open"},
  {"id":"OpenNew","label":"Open New"},null,{"id":"ZoomIn","label":"Zoom In"},
  {"id":"ZoomOut","label":"Zoom Out"},{"id":"OriginalView","label":"Original View"},null,
  {"id":"Quality"},{"id":"Pause"},{"id":"Mute"},null,{"id":"Find","label":"Find..."},
  {"id":"FindAgain","label":"Find Again"},
  {"id":"Copy"},{"id":"CopyAgain","label":"Copy Again"},
  {"id":"CopySVG","label":"Copy SVG"},{"id":"ViewSVG","label":"View SVG"},
  {"id":"ViewSource","label":"View Source"},{"id":"SaveAs","label":"Save As"},null,{"id":"Help"},
  {"id":"About","label":"About Adobe CVG Viewer..."}]}}

    Then to get it as a pretty string you can just do;

    var objPrettyString = JSON.stringify(obj, null, '  ');
console.log(objPrettyString);

    If it is a string similar to this;

        var objString = '{"menu":{"header":"SVG Viewer","items":[{"id":"Open"}, {"id":"OpenNew","label":"Open New"},null,{"id":"ZoomIn","label":"Zoom In"}, {"id":"ZoomOut","label":"Zoom Out"},{"id":"OriginalView","label":"Original View"},null, {"id":"Quality"},{"id":"Pause"},{"id":"Mute"},null,{"id":"Find","label":"Find..."}, {"id":"FindAgain","label":"Find Again"}, {"id":"Copy"},{"id":"CopyAgain","label":"Copy Again"}, {"id":"CopySVG","label":"Copy SVG"},{"id":"ViewSVG","label":"View SVG"}, {"id":"ViewSource","label":"View Source"},{"id":"SaveAs","label":"Save As"},null,{"id":"Help"}, {"id":"About","label":"About Adobe CVG Viewer..."}]}} ';

    Then just parse it first;

    var obj = JSON.parse(objString);
var objPrettyString = JSON.stringify(obj, null, '  ');
console.log(objPrettyString);

    The third parameter in the stringify function determines how the string is formatted. You can read the details on this page - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify