Javascript 从未知对象数组生成HTML表

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

关于如何获取一个对象数组并将其生成一个表（如果您知道其结构的话），这里有很多答案（比如这个优雅的答案：），但是我希望能够生成一个通用的解析器，因为我有许多.csv文件要转换，它将自动填充信息并调整表的大小，（就像“console.table”不支持。）

我可以看到如何检索标题的数据，但是有没有办法 避免知道每个列的键名，因为每个.csv文件的键名总是不同的？例如，此处的“位置”和“年份”：

谢谢！

您可以使用循环获取所有对象值：

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

---

var jsData=new Array（）；
jsData[0]={
地点：“乌拉圭”，
年份：1930年，
获胜者：“乌拉圭”，
WinScore:4，
失败者：“阿根廷”，
失分：2分
};
jsData[1]={
地点：“意大利”，
年份：1934年，
获胜者：“意大利”，
WinScore:2，
失败者：“捷克斯洛伐克”，
失分：1分
};
jsData[2]={
地点：“法国”，
年份：1938年，
获胜者：“意大利”，
WinScore:4，
失败者：“匈牙利”，
失分：2分
};
jsData[3]={
地点：“巴西”，
年份：1950年，
获胜者：“乌拉圭”，
WinScore:2，
失败者：“巴西”，
失分：1分
};
jsData[4]={
地点：“瑞士”，
年份：1954年，
冠军：“西德”，
WinScore:3，
失败者：“匈牙利”，
失分：2分
};
//从对象的“jsData”数组中绘制表格
功能绘图台（t车身）{
var tbody=document.getElementById（“匹配数据”）；
var headerNames=Object.getOwnPropertyNames（jsData[0]）；
var columnCount=人头数。长度；
//添加标题行。
变量行=tbody.insertRow（-1）；
对于（变量i=0；i

您可以使用循环获取所有对象值：

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

---

var jsData=new Array（）；
jsData[0]={
地点：“乌拉圭”，
年份：1930年，
获胜者：“乌拉圭”，
WinScore:4，
失败者：“阿根廷”，
失分：2分
};
jsData[1]={
地点：“意大利”，
年份：1934年，
获胜者：“意大利”，
WinScore:2，
失败者：“捷克斯洛伐克”，
失分：1分
};
jsData[2]={
地点：“法国”，
年份：1938年，
获胜者：“意大利”，
WinScore:4，
失败者：“匈牙利”，
失分：2分
};
jsData[3]={
地点：“巴西”，
年份：1950年，
获胜者：“乌拉圭”，
WinScore:2，
失败者：“巴西”，
失分：1分
};
jsData[4]={
地点：“瑞士”，
年份：1954年，
冠军：“西德”，
WinScore:3，
失败者：“匈牙利”，
失分：2分
};
//从对象的“jsData”数组中绘制表格
功能绘图台（t车身）{
var tbody=document.getElementById（“匹配数据”）；
var headerNames=Object.getOwnPropertyNames（jsData[0]）；
var columnCount=人头数。长度；
//添加标题行。
变量行=tbody.insertRow（-1）；
对于（变量i=0；i

当然有办法。给定一个对象，例如：

var obj = {x:'x', y:'y' ...}

您可以通过

for（obj中的var i）

循环访问每个属性。在这种循环中，变量

i

随后将被分配到

obj

中的所有属性名称。如果执行此操作：

for(var i in obj) {
    console.log(i);
}

您将在控制台中获得

“x”

和

“y”

类似地，对于您的代码，您可以像这样访问

jsData[i]

for (var i = 0; i < jsData.length; i++) {
    var tr = tbody.insertRow(tbody.rows.length);
    for(var colName in jsData[i]) {
        var td = tr.insertCell(tr.cells.length);
        td.innerHTML = jsData[i][colName];
    }
}

当表格已在显示的文档中时，这一点尤为重要

当然有办法。给定一个对象，例如：

var obj = {x:'x', y:'y' ...}

您可以通过

for（obj中的var i）

循环访问每个属性。在这种循环中，变量

i

随后将被分配到

obj

中的所有属性名称。如果执行此操作：

for(var i in obj) {
    console.log(i);
}

您将在控制台中获得

“x”

和

“y”

类似地，对于您的代码，您可以像这样访问

jsData[i]

for (var i = 0; i < jsData.length; i++) {
    var tr = tbody.insertRow(tbody.rows.length);
    for(var colName in jsData[i]) {
        var td = tr.insertCell(tr.cells.length);
        td.innerHTML = jsData[i][colName];
    }
}

当表格已经在显示的文档中时，这一点尤其重要。

Wow--响应速度总是令人惊讶。谢谢--我将在我的实际数据上尝试这一点。Wow--响应速度总是令人惊讶。谢谢--我将在我的实际数据上尝试这一点。（使用此答案。）（使用此答案。）