jsData = [
{location:"Uruguay", year:1930, winner:"Uruguay", winScore:4,
loser:"Argentina", losScore:2},
{location:"Italy", year:1934, winner:"Italy", winScore:2,
loser:"Czechoslovakia", losScore:1},
{location:"France", year:1938, winner:"Italy", winScore:4,
loser:"Hungary", losScore:2},
{location:"Brazil", year:1950, winner:"Uruguay", winScore:2,
loser:"Brazil", losScore:1},
{location:"Switzerland", year:1954, winner:"West Germany", winScore:3,
loser:"Hungary", losScore:2}
]
// Draw table from 'jsData' array of objects
drawTable = function drawTable(tbody) {
var tr, td;
tbody = matchData.querySelector('tbody');
// 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");
td.innerHTML = jsData[i].year;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].location;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].winner;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].loser;
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData[i].winScore + " - " + jsData[i].losScore;
}
}
drawTable("matchData")
matchData_fiddle = html`<table id="cupFinals" border=1 px>
<tbody></tbody>
</table>`
{
// Draw table from 'jsData' array of objects
function drawTable(tbody) {
var tbody = matchData_fiddle.querySelector('tbody');
var headerNames = Object.getOwnPropertyNames(jsData_as_JSON[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);
}
// loop through data source
for (var i = 0; i < jsData_as_JSON.length; i++) {
var tr = document.createElement("tr");
for(var colName in jsData_as_JSON[i]) {
var td = document.createElement("td");
td.innerHTML = jsData_as_JSON[i][colName];
if(colName=="Location")
td.className = "centered";
tr.appendChild(td);
}
tbody.appendChild(tr);
}
}
drawTable("matchData_fiddle");
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
