tl;dr jsfiddle

Question

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

这里有很多答案（例如这个优雅的答案：display array of objects in a dynamic table javascript）关于如何知道结构如何获取一个对象数组并使其成为一个表，但我希望能够制作一个通用的解析器，因为我有一些.csv文件要转换，它会自动填写信息并调整表的大小，（就像＆＃34; console.table＆＃34;那样。）

我可以看到如何检索标题的数据，但有没有办法避免必须知道每列的键名，因为每个.csv文件的键名总是不同的？例如＆＃34;位置＆＃34;和＆＃34;年＆＃34;这里：

{{1}}

JS Fiddle here 即可。

谢谢！

Answer 1

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

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

＆＃13;

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");

＆＃13;

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

＆＃13;

希望这有帮助。

Answer 2

tl;dr jsfiddle

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

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

您可以通过for(var i in obj)循环访问每个媒体资源。在此类循环中，变量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];
    }
}

我想进一步说明.insertRow is not as fast as .appendChild方法，如此处所示。所以我这样做：

for (var i = 0; i < jsData.length; i++) {
    var tr = document.createElement("tr");
    for(var colName in jsData[i]) {
        var td = document.createElement("td");
        td.innerHTML = jsData[i][colName];
        tr.appendChild(td);
    }
    tbody.appendChild(tr);
}

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

从未知对象数组制作HTML表

2 个答案:

tl;dr jsfiddle