Сделать таблицу 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

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

Это особенно важно, когда таблица уже находится в отображаемом документе.

Answer 2

Вы можете использовать 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"); 
 
    \t 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>

Надеется, что это помогает.