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

Javascript or jQuery way to display random-level JSON as HTML

本文关键字：JSON 显示 HTML jQuery 方式随机 Javascript 更新时间：2023-09-26

我想解析任意级别的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

试试这个。

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>