javascript - 从未知对象数组制作 HTML 表格

Question

我一直在使用 PapaParse 将 .csv 文件转换为 JSON。 PapaParse 将 .csv 文件作为对象数组返回。

这里有很多答案(例如这个优雅的答案:display array of objects in a dynamic table javascript)关于如何获取对象数组并将其放入表中(如果您知道结构)，但我希望能够制作一个通用解析器，因为我有许多 .csv 文件要转换，它会自动填充信息并调整表格大小(就像“console.table”一样。)

我可以看到如何检索标题的数据，但是有没有办法 避免必须知道每一列的键名，因为它们对于每个 .csv 文件总是不同的？例如“位置”和“年份”在这里:

td.innerHTML = jsData[i].Location;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].Year;
td = tr.insertCell(tr.cells.length); etc. 

JS Fiddle here 。

谢谢!

Answer 1

您可以使用 for in 循环获取所有对象值:

for(var key in jsData[i])
{
    td.innerHTML = jsData[i][key];
    td = tr.insertCell(tr.cells.length);
}

---

var jsData = new Array();
jsData[0] = {
    Location: "Uruguay",
    Year: 1930,
    Winner: "Uruguay",
    WinScore: 4,
    Loser: "Argentina",
    LosScore: 2
};
jsData[1] = {
    Location: "Italy",
    Year: 1934,
    Winner: "Italy",
    WinScore: 2,
    Loser: "Czechoslovakia",
    LosScore: 1
};
jsData[2] = {
    Location: "France",
    Year: 1938,
    Winner: "Italy",
    WinScore: 4,
    Loser: "Hungary",
    LosScore: 2
};
jsData[3] = {
    Location: "Brazil",
    Year: 1950,
    Winner: "Uruguay",
    WinScore: 2,
    Loser: "Brazil",
    LosScore: 1
};
jsData[4] = {
    Location: "Switzerland",
    Year: 1954,
    Winner: "West Germany",
    WinScore: 3,
    Loser: "Hungary",
    LosScore: 2
};

// Draw table from 'jsData' array of objects



function drawTable(tbody) {
    var tbody = document.getElementById("matchData");
   	var headerNames = Object.getOwnPropertyNames(jsData[0]);
    var columnCount = headerNames.length;
    //Add the header row.
    var row = tbody.insertRow(-1);
    for (var i = 0; i < columnCount; i++) {
        var headerCell = document.createElement("TH");
        headerCell.innerHTML = headerNames[i];
        row.appendChild(headerCell);
    }
    var tr, td;

    // loop through data source
    for (var i = 0; i < jsData.length; i++) {
        tr = tbody.insertRow(tbody.rows.length);
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("align", "center");

        for(var key in jsData[i])
        {
            td.innerHTML = jsData[i][key];
            td = tr.insertCell(tr.cells.length);
        }
        
    }
}
drawTable("matchdata");

<table id="cupFinals" border=1 px>
    <tbody id="matchData"></tbody>
</table>

希望这对您有所帮助。