Javascript 或 jQuery 方式将随机级别 JSON 显示为 HTML

Question

我想将任意级别的 JSON 片段解析并显示为 HTML。任意级别是指没有预先定义的结构。例如：

"CustomFields": [
                {
                    "Main": [
                        {
                            "None": [
                                {
                                    "SDOM Date": "2014-12-24"
                                },
                                {
                                    "User Defined 31": "2009-03-02"
                                }
                            ]
                        },
                        {
                            "Contract Data": [
                                {
                                    "Status2": "Active"
                                },
                                {
                                    "User Defined 112": "N"
                                }
                            ]
                        }
                    ]
                }

除了CustomFields 根元素，它下面的一切都是不可预测的。但基本上有对象层，每个对象都是其他对象的数组，直到你最终得到一个对象值。在上面的示例中，有 4 个级别。但是可以有任意数量。

我想要显示如下内容：

• 主要
  • 无
    • SDOM 日期：2014-12-24
    • 用户定义 31：2009-03-02
  • 合同数据
    • 状态 2：有效
    • 用户自定义 112: N

Answer 1

试试这个..

var json = {"CustomFields": [
                {
                    "Main": [
                        {
                            "None": [
                                {
                                    "SDOM Date": "2014-12-24"
                                },
                                {
                                    "User Defined 31": "2009-03-02"
                                }
                            ]
                        },
                        {
                            "Contract Data": [
                                {
                                    "Status2": "Active"
                                },
                                {
                                    "User Defined 112": "N"
                                }
                            ]
                        }
                    ]
                }]};

function jsonToHtml(array){
    var html = '<ul>';
    for (var i=0; i<array.length; i++){
        if (typeof array[i] == 'object'){
            for (var j in array[i]){
                var innerHTML = (typeof array[i][j]=='object')?jsonToHtml(array[i][j]):' : '+array[i][j];
                html += '<li>'+j+innerHTML+'</li>';
            }
        }
    }
    html += '</ul>';
    return html;
}
    
aaa.innerHTML = jsonToHtml(json.CustomFields);    

<div id="aaa"></div>