Javascript 将嵌套JSON数据转换为表

我试图将嵌套的JSON数据转换成HTML表，但它一直抛出错误

我不确定我哪里做错了。访问对象内部数组的方法可能有问题

它不断抛出这个错误：

“无法将属性'innerHTML'设置为null”

下面是我写的代码：

function DonutTable(array){
    //create a table element
    var table = document.createElement("table");
    //create header columns

    var col = Object.keys(array[0]); //array of keys
    //write keys onto the header cell
    var tr = table.insertRow(-1);
    col.forEach(function(key){
        var th = document.createElement("th");
        th.textContent = key;
        tr.appendChild(th);
    });

    //create rows to hold the rest of the data
    array.forEach(function(obj){
        //for each obj in the main array, create a row
        var data_row = table.insertRow(-1);
        //for each header in the col array, populate data
        col.forEach(function(key){
            var tabCell = data_row.insertCell(-1);
            if (key==="batters"){
                //grab the value of batters and access value of batter
                obj["batters"]["batter"].forEach(function(e){
                    //for each e in batter, create a div element
                    var div = document.createElement("div");
                    //write on the div 
                    div.textContent =  e.type + "(" + e.id + ")";
                    tabCell.appendChild(div); })
                }
            if (Array.isArray(obj[key])){ //check if a value of a key is an array
                obj[key].forEach(function(topping){
                    //for each obj in topping, get id and type 
                    var div = document.createElement("div");
                    div.textContent =  topping.type + "(" + topping.id + ")";
                    tabCell.appendChild(div);
                })
            }
            else{
                tabCell.textContent = obj[key];
            }


                })
            })


    var divContainer = document.getElementById("showTable");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);

}

var donut = [
    {
        "id": "0001",
        "type": "donut",
        "name": "Cake",
        "ppu": 0.55,
        "batters":
            {
                "batter":
                    [
                        { "id": "1001", "type": "Regular" },
                        { "id": "1002", "type": "Chocolate" },
                        { "id": "1003", "type": "Blueberry" },
                        { "id": "1004", "type": "Devil's Food" }
                    ]
            },
        "topping":
            [
                { "id": "5001", "type": "None" },
                { "id": "5002", "type": "Glazed" },
                { "id": "5005", "type": "Sugar" },
                { "id": "5007", "type": "Powdered Sugar" },
                { "id": "5006", "type": "Chocolate with Sprinkles" },
                { "id": "5003", "type": "Chocolate" },
                { "id": "5004", "type": "Maple" }
            ]
    },
    {
        "id": "0002",
        "type": "donut",
        "name": "Raised",
        "ppu": 0.55,
        "batters": 
            {
                "batter":
                    [
                        { "id": "1001", "type": "Regular" }
                    ]
            },
        "topping":
            [
                { "id": "5001", "type": "None" },
                { "id": "5002", "type": "Glazed" },
                { "id": "5005", "type": "Sugar" },
                { "id": "5003", "type": "Chocolate" },
                { "id": "5004", "type": "Maple" }
            ]
    },
    {
        "id": "0003",
        "type": "donut",
        "name": "Old Fashioned",
        "ppu": 0.55,
        "batters":
            {
                "batter":
                    [
                        { "id": "1001", "type": "Regular" },
                        { "id": "1002", "type": "Chocolate" }
                    ]
            },
        "topping":
            [
                { "id": "5001", "type": "None" },
                { "id": "5002", "type": "Glazed" },
                { "id": "5003", "type": "Chocolate" },
                { "id": "5004", "type": "Maple" }
            ]
    }
]
DonutTable(donut);

<html>
    <head>
        <title>HTML Donut Table from JSON</title>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <input type="button" value="Generate a table" onclick="DonutTable()">
        <div id="showTable"></div>
    </body>
</html>

函数不可执行（数组）{
//创建一个表元素
var table=document.createElement（“表”）；
//创建标题列
var col=Object.keys（数组[0]）；//键数组
//将键写入标题单元格
var tr=table.insertRow（-1）；
col.forEach（功能（键）{
var th=document.createElement（“th”）；
th.textContent=key；
tr.appendChild（th）；
});
//创建行以保存其余数据
array.forEach（函数（obj）{
//对于主数组中的每个obj，创建一行
var data_row=table.insertRow（-1）；
//对于col数组中的每个标头，填充数据
col.forEach（功能（键）{
var tabCell=data_row.insertCell（-1）；
如果（键==“击球员”）{
//抓取面糊的价值，获取面糊的价值
obj[“面糊”][“面糊”].forEach（函数（e）{
//对于batter中的每个e，创建一个div元素
var div=document.createElement（“div”）；
//写在div上
div.textContent=e.type+”（“+e.id+”）；
tabCell.appendChild（div）；}）
}
if（Array.isArray（obj[key]）{//检查键的值是否为数组
obj[key].forEach（函数（顶部）{
//对于topping中的每个obj，获取id和类型
var div=document.createElement（“div”）；
div.textContent=topping.type+”（“+topping.id+”）；
tabCell.appendChild（div）；
})
}
否则{
tabCell.textContent=obj[key]；
}
})
})
var divContainer=document.getElementById（“showTable”）；
divContainer.innerHTML=“”；
divContainer.appendChild（表）；
}
变量油炸圈饼=[
{
“id”：“0001”，
“类型”：“甜甜圈”，
“名字”：“蛋糕”，
“ppu”：0.55，
“击球手”：
{
“面糊”：
[
{“id”：“1001”，“type”：“Regular”}，
{“id”：“1002”，“type”：“Chocolate”}，
{“id”：“1003”，“type”：“Blueberry”}，
{“id”：“1004”，“type”：“魔鬼食品”}
]
},
“浇头”：
[
{“id”：“5001”，“type”：“None”}，
{“id”：“5002”，“type”：“glassed”}，
{“id”：“5005”，“type”：“Sugar”}，
{“id”：“5007”，“类型”：“糖粉”}，
{“id”：“5006”，“type”：“巧克力洒”}，
{“id”：“5003”，“type”：“Chocolate”}，
{“id”：“5004”，“type”：“Maple”}
]
},
{
“id”：“0002”，
“类型”：“甜甜圈”，
“名称”：“提出”，
“ppu”：0.55，
“击球手”：
{
“面糊”：
[
{“id”：“1001”，“type”：“Regular”}
]
},
“浇头”：
[
{“id”：“5001”，“type”：“None”}，
{“id”：“5002”，“type”：“glassed”}，
{“id”：“5005”，“type”：“Sugar”}，
{“id”：“5003”，“type”：“Chocolate”}，
{“id”：“5004”，“type”：“Maple”}
]
},
{
“id”：“0003”，
“类型”：“甜甜圈”，
“名称”：“老式”，
“ppu”：0.55，
“击球手”：
{
“面糊”：
[
{“id”：“1001”，“type”：“Regular”}，
{“id”：“1002”，“type”：“Chocolate”}
]
},
“浇头”：
[
{“id”：“5001”，“type”：“None”}，
{“id”：“5002”，“type”：“glassed”}，
{“id”：“5003”，“type”：“Chocolate”}，
{“id”：“5004”，“type”：“Maple”}
]
}
]
甜甜圈；
来自JSON的HTML甜甜圈表

在Chrome中，在声明divContainer后立即设置断点。根据代码，divContainer看起来是空的，因为您在页面上的HTML之前运行JavaScript。要么将JS移到document.ready类型函数中，要么将脚本部分移到HTML下面。

这就是我刚才拆分为JS和HTML部分的代码

它在初始运行时起作用，因为

donut

数组显式传递给

DonutTable（）

函数。它在单击按钮时不起作用，因为HTML调用了

DonutTable（）

，没有参数

函数不可执行（数组）{
//创建一个表元素
var table=document.createElement（“表”）；
//创建标题列
var col=Object.keys（数组[0]）；//键数组
//将键写入标题单元格
var tr=table.insertRow（-1）；
col.forEach（功能（键）{
var th=document.createElement（“th”）；
th.textContent=key；
tr.appendChild（th）；
});
//创建行以保存其余数据
array.forEach（函数（obj）{
//对于主数组中的每个obj，创建一行
var data_row=table.insertRow（-1）；
//对于col数组中的每个标头，填充数据
col.forEach（功能（键）{
var tabCell=data_row.insertCell（-1）；
如果（键==“击球员”）{
//抓取面糊的价值，获取面糊的价值
obj[“面糊”][“面糊”].forEach（函数（e）{