javascript - 如何使用正确的缩进在 html 中打印复杂的嵌套 JSON 对象？

Question

index.html

1. 如何在 html 页面上打印复杂的 json 对象？
2. 它应该看起来像一个具有适当缩进的 json 对象
3. 我应该只能更改 json KEY 并将其保存回来。

注意:我不能使用 json.stringify，因为我想要一种 JOSN 编辑器，我应该只更改键而不是值并将其保存回来。

  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.

Answer 1

<强> Use JSON.stringify() 将 JSON 对象输出为预格式化字符串。

查看文档，显示有三个参数；第一个是要打印的 JSON 对象，第二个是“替换器”，第三个是缩进的字符数。

将 JSON 对象转换为缩进级别 2 的预格式化字符串:

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

<小时/>

使用预格式化文本元素显示 JSON

使用Preformatted Text ( <pre> ) element 以 HTML 格式显示预先格式化的文本。

只需输出您的新 preformattedJson <pre> 内的变量标签，如下:

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

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