JSON.Stringify Output to Div in Pretty Print Way

pretty-print JSON using JavaScript

Pretty-printing is implemented natively in JSON.stringify(). The third argument enables pretty printing and sets the spacing to use:

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

If you need syntax highlighting, you might use some regex magic like so:

function syntaxHighlight(json) {
    if (typeof json != 'string') {
         json = JSON.stringify(json, undefined, 2);
    }
    json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

See in action here: jsfiddle

Or a full snippet provided below:

function output(inp) {    document.body.appendChild(document.createElement('pre')).innerHTML = inp;}
function syntaxHighlight(json) {    json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {        var cls = 'number';        if (/^"/.test(match)) {            if (/:$/.test(match)) {                cls = 'key';            } else {                cls = 'string';            }        } else if (/true|false/.test(match)) {            cls = 'boolean';        } else if (/null/.test(match)) {            cls = 'null';        }        return '<span class="' + cls + '">' + match + '</span>';    });}
var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};var str = JSON.stringify(obj, undefined, 4);
output(str);output(syntaxHighlight(str));

pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }.string { color: green; }.number { color: darkorange; }.boolean { color: blue; }.null { color: magenta; }.key { color: red; }

JSON.stringify output to div in pretty print way

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>

Pretty Json object in html

You can try with |json

<div class="box box-default">
    <code>
        <pre>{{placeDetail |json}}</pre>
    </code>
</div>

Display Json in react JS div formatted properly

You will probably have to create your html based on each property of JSON and create your styles accordingly. However, you can use a third party component to do that for you. Check this one out:

https://github.com/chenckang/react-json-pretty

javascript - Convert JSON string to JSON pretty

JSON.stringify output to div in pretty print way

Change your <div> to a <pre> and it should work.

var stuff = {  "event": "success",  "method": "sale",  "request_id": "275936ad-83c0-4afd-88ff-6943c4ee2781",  "response_code": "A01",  "response_description": "TEST APPROVAL",  "trace_number": "8da65a44-3c07-4590-8b62-302f533aaa18",  "authorization_code": "123456",  "customer_token": "0InRBKpTSy2VlUL0wbLZlQ",  "paymethod_token": "vPSGgKycRXWWqkxiiXm_IA",  "total_amount": "8.88",  "order_number": "COR-199287",  "version_number": "1.0",  "last_4": "1111",  "method_used": "visa",  "hash_method": "md5",  "save_token": "true",  "expire_month": "02",  "expire_year": "2020",  "signature": "731c764db3d3d5c25e371fbffd331e5c",  "utc_time": "636584905150041669"};
var str = JSON.stringify(stuff, null, 2); // spacing level = 2$('#message').html(str)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html>
<body>  <pre id='message'></pre></body>
</html>

JSON.Stringify Output to Div in Pretty Print Way

pretty-print JSON using JavaScript

JSON.stringify output to div in pretty print way

Pretty Json object in html

Display Json in react JS div formatted properly

javascript - Convert JSON string to JSON pretty

Related Topics

Leave a reply