Question

的index.html

如何在html页面上打印复杂的json对象？
它应该看起来像一个带有适当缩进的json对象
我应该只能更改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＆gt; LI标签组合。

Answer 1

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

查看文档，它显示有三个参数;第一个是你想要打印的JSON对象，第二个是＆＃39;替换器＆＃39;第三个是缩进字符的数量。

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

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

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

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

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

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

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

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

1 个答案: