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


Nested JSON to Numbered HTML Table using Javascript

我正在尝试从JSON生成HTML表

提供的JSON是深层嵌套的。在此线程的帮助下，如何循环浏览JavaScript对象的深层嵌套属性？我能够获取JSON的值，但是我对如何生成HTML表感到困惑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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);
        }
    }
}

在Ideone上运行此命令

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

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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>';

，然后在您的html中的某处添加table。

如果您想在该链接上生成所需的输出，则可以使用

<MMKG1>

<MMKGX1>

<MMKG1>

<MMKG1>

<MMKGX1>

<MMKG1>


而不是桌子。使用javascript生成它。您可以使用以下代码来生成您的有序列表，该序列应插入到主有序列表标记中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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>
"
            +"" + generateCities(stat.cities) +""
            )
    });
}
function generateMyHtml(district, generateStates){
    district.map((dist, index) => {
        return (
           "
<li>
 District"+ index +"consists of following states --- ration" + dist.ration +"
</li>
"
             +"" + generateStates(dist.states) +""
        )  
    });
};

希望这会有所帮助