JSON.stringify output to div in pretty print way

Question

I JSON.stringify a json object by

result = JSON.stringify(message, my_json, 2)

The 2 in the argument above is supposed to pretty print the result. It does this if I do something like alert(result). However, I want to output this to the user by appending it inside a div. When I do this I get just a single line showing up. (I don't think it is working because the breaks and spaces are not being interpreted as html?)

{ "data": { "x": "1", "y": "1", "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 }

Is there a way to output the result of JSON.stringify to a div in a pretty print way?

Solution 1

Please use a <pre> tag

demo : http://jsfiddle.net/K83cK/

var data = {
  "data": {
    "x": "1",
    "y": "1",
    "url": "http://url.com"
  },
  "event": "start",
  "show": 1,
  "id": 50
}


document.getElementById("json").textContent = JSON.stringify(data, undefined, 2);

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

Solution 2

Make sure the JSON output is in a <pre> tag.

Solution 3

If your <pre> tag is showing a single-line of JSON because that's how the string is provided already (via an api or some function/page out of your control), you can reformat it like this:

HTML:

<pre id="json">{"some":"JSON string"}</pre>

JavaScript:

    (function() {
        var element = document.getElementById("json");
        var obj = JSON.parse(element.innerText);
        element.innerHTML = JSON.stringify(obj, undefined, 2);
    })();

or jQuery:

    $(formatJson);

    function formatJson() {
        var element = $("#json");
        var obj = JSON.parse(element.text());
        element.html(JSON.stringify(obj, undefined, 2));
    }

Solution 4

My proposal is based on:

• replace each '\n' (newline) with a <br>
• replace each space with &nbsp;

var x = { "data": { "x": "1", "y": "1", "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 };


document.querySelector('#newquote').innerHTML = JSON.stringify(x, null, 6)
     .replace(/\n( *)/g, function (match, p1) {
         return '<br>' + '&nbsp;'.repeat(p1.length);
     });

<div id="newquote"></div>

Solution 5

Full disclosure I am the author of this package but another way to output JSON or JavaScript objects in a readable way complete with being able skip parts, collapse them, etc. is nodedump, https://github.com/ragamufin/nodedump

View more solutions

Comments

[epascarello]

Use a pre element? Use a prettify library?

[Ryan]

Using PHP, this was helpful for me: stackoverflow.com/a/13638998/470749

[mickmackusa]

Does this answer your question? Render a string in HTML and preserve spaces and linebreaks

[Diode]

pre tells the browser engine that the content inside is pre-formatted and it can be displayed without any modification. So browser will not remove white spaces, new lines etc. code is for making it more semantic and denotes that the content inside is a code snippet. It has nothing to with formatting. It is advised to use like this, <pre><code> /* Your code snippet here. */ </code></pre>

[JoachimR]

in order to avoid long lines to go out of the container the pre tag is a child of, one should add the following css rules to the pre tag: stackoverflow.com/a/248013/883083

[Steven]

I always forget about the <pre> tag.

[Learner]

but if I use "array": [1,2,3,4] in above js fiddle in data . it splits array in multiple lines. why?

[Diode]

@iGod: That is how stringify formats. You can override it by using a 'replacer' function which is the second parameter as shown below. JSON.stringify({name: "Diode", details: {age: 123, place: "xyz"}, list: [1, 2, 3, 4, 5]},function(k,v){ if(v instanceof Array) return JSON.stringify(v); return v; },2);

[user3692823]

@Diode I would also mention it is better to use .textContent instead of .innerHTML because it will escape dangerous html that might be in the json: developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensio‌​ns/…