CODEWITHSUNDEEP
javascripthtmlcssjsonpretty-print
Praveen
Praveen

Reputation: 504

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.

Upvotes: 0

Views: 3666

Answers (2)

Nadir Laskar
Nadir Laskar

Reputation: 4150

JSON.stringify() supports pretty printing.

var str = JSON.stringify(obj, null, 2);

Further you can use highlight.js to highlight your json.

All you need to do is add class json to pre code tag

<pre><code id="code" class="json"></code></pre>

and call hljs.initHighlightingOnLoad();

It will highlight the json string.

SNIPPET

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..."}]}};

var str = JSON.stringify(obj, null, 2);

$('#code').text(str);
hljs.initHighlightingOnLoad();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<pre><code id="code" class="json"></code></pre>

Upvotes: 3

Oliver Jenkins
Oliver Jenkins

Reputation: 126

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

Upvotes: 2

Related Questions