使用 Javascript 将 JSON 嵌套到编号 HTML 表

Posted 2023-03-05

【中文标题】使用 Javascript 将 JSON 嵌套到编号 HTML 表

【英文标题】：Nested JSON to Numbered HTML Table using Javascript

【发布时间】：2018-07-16 07:11:07

【问题描述】：

我正在尝试从 JSON 生成 html 表格

提供的 JSON 是深度嵌套的。在这个线程 How do I loop through deeply nested properties of a javascript object? 的帮助下，我能够获取 JSON 的值，但我对如何生成 HTML 表感到困惑

var districts = 
    "district": [
        "ration": 4,
        "states": [
            "name": "Louisiana",
            "population": 42383,
            "cities": [
                "name": "Cavalero"
            ]
        ]
    , 
        "ration": 1,
        "states": [
            "name": "Colorado",
            "population": 980,
            "cities": []
        , 
            "name": "Arkansas",
            "population": 58998,
            "cities": []
        , 
            "name": "Illinois",
            "population": 59333,
            "cities": [
                "name": "Kenwood"
            ]
        ]
    , 
        "ration": 2,
        "states": [
            "name": "Washington",
            "population": 83984,
            "cities": [
                "name": "Conestoga"
            , 
                "name": "Whitehaven"
            , 
                "name": "Dellview"
            ]
        , 
            "name": "West Virginia",
            "population": 38034,
            "cities": []
        ]
    ]
;
var i, district, j, states, k, cities;
for (i = 0; i < districts.district.length; i++) 
    district = districts.district[i];
    print(i + 1, ". District", i + 1, "consists of following states", "--- ration", district.ration);
    for (j = 0; j < district.states.length; j++) 
        states = district.states[j];
        var said = (states.cities.length > 0) ? ("consists of following cities") : ("");
        print(i + 1, ".", j + 1, states.name, said, "--- population", states.population);
        for (k = 0; k < states.cities.length; k++) 
            cities = states.cities[k];
            print("     ", i + 1, ".", j + 1, ".", k + 1, cities.name);
        
    

Run this on Ideone

任何指针/帮助/建议表示赞赏

【问题讨论】：

那不是 JSON，见benalman.com/news/2010/03/theres-no-such-thing-as-a-json

【参考方案1】：

如果您想在该链接上生成所需的输出，您可以使用 <ol> <li></li> <li> <ol><li></li></ol> <li> </ol> 而不是表。使用javascript生成它。您可以使用下面的代码生成应插入主有序列表标签的有序列表。

var district = districts.district;

function generateCities(cities)
    cities.map((city) => 
        return (
            "<li>"+ city.name  + "</li>"
        )
    )


function generateStates(states, generateCities)
    states.map((stat) => 
        return (
            "<li>"+stat.name + " consists of following cities --- population " + stat.population + "</li>"
            +"<ol>" + generateCities(stat.cities) + "</ol>"
            )
    );

function generateMyHtml(district, generateStates)
    district.map((dist, index) => 
        return (
            "<li> District "+ index + "consists of following states --- ration " + dist.ration + "</li>"
             +"<ol>" + generateStates(dist.states) + "</ol>"
        )   
    );
;

希望对你有帮助

【参考方案2】：

您需要生成一个table，如下所示：

var districts = 
    "district": [
        "ration": 4,
        "states": [
            "name": "Louisiana",
            "population": 42383,
            "cities": [
                "name": "Cavalero"
            ]
        ]
    , 
        "ration": 1,
        "states": [
            "name": "Colorado",
            "population": 980,
            "cities": []
        , 
            "name": "Arkansas",
            "population": 58998,
            "cities": []
        , 
            "name": "Illinois",
            "population": 59333,
            "cities": [
                "name": "Kenwood"
            ]
        ]
    , 
        "ration": 2,
        "states": [
            "name": "Washington",
            "population": 83984,
            "cities": [
                "name": "Conestoga"
            , 
                "name": "Whitehaven"
            , 
                "name": "Dellview"
            ]
        , 
            "name": "West Virginia",
            "population": 38034,
            "cities": []
        ]
    ]
;
//Start of the table, including header
var table = '<table><thead><tr><th>Num</th><th>District</th><th>Population</th><th>Ration</th></tr></thead><tbody>';

//Num
for (var i = 0; i < districts.district.length; i++) 
    //District
    var district = districts.district[i];
    //First row
    table += '<tr><td>' + (i + 1) + '</td><td>District ' + district.ration + ' consists of the following states:</td><td></td><td>' + district.ration + '</td></tr>';
    //States
    var states = district.states;
    for (var j = 0; j < states.length; j++) 
        table += '<tr><td></td><td>' + (i + 1) + '.' + (j + 1) + ' ' + states[j] + ((states[j].cities && states[j].cities.length) ? ' consists of following cities:' : '') + '</td><td>' + states[j].population + '</td><td></td></tr>';
        //Cities
        if (states[j].cities) 
            for (var k = 0; k < states[j].cities; k++) 
                table += '<tr><td></td><td>' + (i + 1) + '.' + (j + 1) + '.' + (k + 1) + ' ' + states[j].cities[k].name + '</td><td></td><td></td></tr>';
            
        
    


//End of the table
table += '</tbody></table>';

然后将table 添加到您的html 中。