How to print a complex nested JSON object in html using correct indentation?

Question

index.html

How to print a complex json object on html page?
It should look like a json object with proper indentation
I should be able to change the json KEY only and save it back.

NOTE: I can't use json.stringify as i want a kind of JOSN editor where I should change the key only not value and save it back.

  p{
    padding: 0;
    margin: 0;   } 
.indentLeft20{padding-left: 20px;} 
.indentLeft40{padding-left: 40px;} 
.indentLeft60{padding-left: 60px;} 
.indentLeft80{padding-left: 80px;} 
.indentLeft100{padding-left: 100px;} 
<div id="root"></div>

javascript

export default function editorGenerator() {

    const root = document.getElementById('root');

    var data = {
        "prodname": "My product",
        "type": "medium",
        "color": "red",


        num: [1,2,3],
        "area": {
            "height": 2,
            "width": 3,
            "length": 4
        },

        "feature": {
            "featureArray": [{
                    "title": "title1",
                    "available": true
                },
                {
                    "title": "title2'",
                    "available": true
                },
                {
                    "title": "title3",
                    "available": false
                }
            ]
        }
    };

    editor( data );

}

 var indent = 20;  //to add padding for indentation


 var myeditor = document.createElement("DIV");

 let editor = function self(obj, editor){

    for(var key in obj){
        if(typeof obj[key] === 'object' && !Array.isArray(obj[key])){


            var line = document.createElement("DIV");

            var txtdata = document.createElement("H6"); 
            var textnode = document.createTextNode(key+"(Object)");         
            txtdata.appendChild(textnode);  
            line.appendChild(txtdata);   
            myeditor.appendChild(line); 

            var att = document.createAttribute("class");       
            att.value = "indentLeft"+indent;                           
            line.setAttributeNode(att);  

            indent = indent+20;
            self( obj[key]);  


        }
        if(Array.isArray(obj[key])){
            indent = indent+20;

            var line = document.createElement("DIV");

            var txtdata = document.createElement("H6"); 
            var textnode = document.createTextNode(key+"(Array)");         
            txtdata.appendChild(textnode);  
            line.appendChild(txtdata);   
            myeditor.appendChild(line); 

            var att = document.createAttribute("class");       
            att.value = "indentLeft"+indent;  
            line.setAttributeNode(att);  


            obj[key].forEach( (item)=>{
                if(typeof item !== 'object'){
                    var line = document.createElement("DIV");

                    var txtdata = document.createElement("p"); 
                    var textnode = document.createTextNode(item);         
                    txtdata.appendChild(textnode);  
                    line.appendChild(txtdata);   
                    myeditor.appendChild(line);   
                }

            })

        }
        if(typeof obj[key] === 'string' || typeof obj[key] === 'number' || typeof obj[key] === 'boolean'){
            var line = document.createElement("DIV");                 
            var txtdata = document.createElement("P"); 

            console.log(key+' :: '+obj[key] );               

            var textnode = document.createTextNode(obj[key]);         

            txtdata.appendChild(textnode);  
            line.appendChild(txtdata);   
            myeditor.appendChild(line); 

            var att = document.createAttribute("class");      
            att.value = "indentLeft"+indent;                        
            line.setAttributeNode(att);   
        }
        if( Array.isArray(obj[key]) ){
            obj[key].forEach(item => {
                self( item );    
            });
        }

    }

 }

 root.appendChild(myeditor);

i have to print nested JSON object on HTML page. JSON object format differ always, it is not fix. It can be very complex object. I have to print it with right indentation. Also I have to wrap the object and arrays inside the bracket so that it should look like a object on the page. I have to use DIV or UL > LI tag combination.

See if this answer is helpful: https://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript — Chris Riebschlager, Jan 03 '18 at 19:46

Trent · Answer 1 · 2018-01-03T20:00:51.633

Use JSON.stringify() to output a JSON object as a pre-formatted string.

Looking at the documentation, it shows that there are three parameters; the first being the JSON object you want to print, the second being a 'replacer' and the third being the amount of characters for indentation.

Converting a JSON object into a pre-formatted string with indentation level 2:

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

Displaying JSON using the Preformatted Text element

Use the Preformatted Text (<pre>) element to display text in HTML that is pre-formatted.

Simply output your new preformattedJson variable inside of the <pre> tag, as follows:

<pre>{{preformattedJson}}</pre>

Note: The method used for outputting JSON inside your HTML will be different, depending on your choice of development framework.

How to print a complex nested JSON object in html using correct indentation?

1 Answers1