Display Json String in html with correct indention

Question

My server side will return a JSON string and I need to display it at my Html page. So lets say the string is something like this:

{"FirstChildType":{"FirstGrandChild":{"GrandChildName":"123"},"FirstChildName":"a"},"SecondChildType":{"SecondChildName":"SecondChildABC","SecondChildLastName":"SecondChildXYZ"},"ThirdChildType":null,"FirstName":"ABC","LastName":"XYZ"}

How do I show this in my Html with a nice indention? I tried 'google-code-prettify' but somehow couldn't get this to work like I wanted.

Yes, can. Javascript or any client side library. I want to display it something like syntax highlighter, but with correct indention. — dausdashsan, Feb 19 '14 at 07:27

score 0 · Answer 1 · answered Feb 19 '14 at 07:24

You can use JSON.stringify to format it :

var jsParsed = {"FirstChildType":{"FirstGrandChild":{"GrandChildName":"123"},"FirstChildName":"a"},"SecondChildType":{"SecondChildName":"SecondChildABC","SecondChildLastName":"SecondChildXYZ"},"ThirdChildType":null,"FirstName":"ABC","LastName":"XYZ"};        
var indented = JSON.stringify(g,null,4);

score 0 · Accepted Answer · edited May 23 '17 at 12:03

This page here answers it well with JSON.stringfy. See it in JS Fiddle

            function syntaxHighlight(json) {
                if (typeof json != 'string') {
                     json = JSON.stringify(json, undefined, 2);
                }
                json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                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>';
                });
            }

Display Json String in html with correct indention

2 Answers2