如何使用正确的缩进在 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);

我必须在 HTML 页面上打印嵌套的 JSON 对象。 JSON 对象格式总是不同，它不是固定的。它可以是非常复杂的对象。我必须用正确的缩进打印它。此外，我必须将对象和数组包装在括号内，使其看起来像页面上的对象。我必须使用 DIV 或 UL > LI 标签组合。

Answer 1

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

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

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

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

---

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

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

只需在<pre> 标记内输出新的preformattedJson 变量，如下所示：

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

注意：用于在 HTML 中输出 JSON 的方法会有所不同，具体取决于您选择的开发框架。