2e:null 2f:["$","title",null,{"children":"Simple HTML Table from JS Array | Aaron Kyle Dennis | Observable"}] 34:T5f2,table1 = { // Table data -- an array of objects 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 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"); }35:[] 32:{"id":"b2e92d2aa8ba472d","slug":"simple-html-table-from-js-array","title":"Simple HTML Table from JS Array","thumbnail":"be741d1e41fbcdc6b941ca9f208fde9a7398c2258eb66e7bc1413243e26c7b09","access_level":"public","create_time":"$D2019-02-02T12:31:20.664Z","update_time":"$D2019-02-02T15:39:02.368Z","view_time":null,"first_public_time":"$D2019-02-02T15:02:11.062Z","has_unpublished_edits":null,"fork":true,"stars":6,"starred":false,"owner":{"type":"team","id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":"starter_2024"},"version":134,"publish_version":134,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"281f5fd0d247a355","slug":"basic-tutorials","title":"Examples & Tutorials","owner":{"id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis"}},"type":"notebook","body":{"title":"Simple HTML Table from JS Array","cells":[{"id":0,"value":"md`# Simple HTML Table from JS Array`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`This notebook demonstrates how to generate a simple HTML table from array data. Thanks to [Fabian Iwand](https://beta.observablehq.com/@mootari) for [carrying it over the finish line!](https://talk.observablehq.com/t/newbie-question-how-to-use-fetch-await-or-otherwise-avoiding-typeerror-cannot-read-property-of-null/1637)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`The example used here is derives from Danny Goodman's [JavaScript & DHTML Cookbook: Solutions & Examples for Web Programmers](https://books.google.com/books?id=pvmjldfuwnQC&pg=PA467&lpg=PA467&dq=location:%22Uruguay%22,+year:1930,+winner:%22Uruguay%22,+winScore:4,+loser:%22Argentina%22,+losScore:2&source=bl&ots=WNQ_z9k7w8&sig=ACfU3U29fDweEJczcNpMaEk72Tvs7hrv_Q&hl=en&sa=X&ved=2ahUKEwiOjo6FhJ3gAhXJuVkKHSswBkkQ6AEwAHoECAAQAQ#v=onepage&q=location%3A%22Uruguay%22%2C%20year%3A1930%2C%20winner%3A%22Uruguay%22%2C%20winScore%3A4%2C%20loser%3A%22Argentina%22%2C%20losScore%3A2&f=false), can be accessed via Google Books (as linked) or [via the website of this Ukrainian telecom company](https://docstore.mik.ua/orelly/webprog/DHTML_javascript/0596004672_jvdhtmlckbk-chp-14-sect-8.html) (which is how I originally found it).`\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`Let's first adapt the example so that data populate to an HTML table that explicitly defines row titles:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"matchData = html`\n\n\n \n \n \n \n\n\n\n

Year	Host Country	Winner	Loser	Score (Win - Lose)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`\nThe above code modifies the original example by changing \\`tbody = document.getElementById(tbody);\\` to \\`tbody = matchData.querySelector('tbody');\\` so that the table will draw without having to re-run the cell, and by adding \\`drawTable(\"matchData\");\\` at the end so that the table is drawn where the \\`id=\"matchData\"\\` is defined in the HTML frame.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md`\nTo take this one step further, let's also define the \\`\\` header elements dynamically from array data. [This jsfiddle example](http://jsfiddle.net/nN84h/240/), from [this StackOverflow exchange](https://stackoverflow.com/questions/33860918/make-html-table-from-array-of-unknown-objects/33860968#33860968) shows us how to get there:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"matchData_fiddle = html`\n \n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"{ \n // Draw table from 'jsData' array of objects\nfunction drawTable(tbody) {\n var tbody = matchData_fiddle.querySelector('tbody');\n \tvar headerNames = Object.getOwnPropertyNames(jsData_as_JSON[0]);\n var columnCount = headerNames.length;\n //Add the header row.\n var row = tbody.insertRow(-1);\n for (var i = 0; i < columnCount; i++) {\n var headerCell = document.createElement(\"TH\");\n headerCell.innerHTML = headerNames[i];\n row.appendChild(headerCell);\n }\n\n // loop through data source\n for (var i = 0; i < jsData_as_JSON.length; i++) {\n var tr = document.createElement(\"tr\");\n for(var colName in jsData_as_JSON[i]) {\n var td = document.createElement(\"td\");\n td.innerHTML = jsData_as_JSON[i][colName];\n if(colName==\"Location\") \n td.className = \"centered\";\n tr.appendChild(td);\n }\n tbody.appendChild(tr);\n }\n}\ndrawTable(\"matchData_fiddle\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"jsData_as_JSON = [{\n Location: \"Uruguay\",\n Year: 1930,\n Winner: \"Uruguay\",\n WinScore: 4,\n Loser: \"Argentina\",\n LosScore: 2\n},\n{\n Location: \"Italy\",\n Year: 1934,\n Winner: \"Italy\",\n WinScore: 2,\n Loser: \"Czechoslovakia\",\n LosScore: 1\n},\n{\n Location: \"France\",\n Year: 1938,\n Winner: \"Italy\",\n WinScore: 4,\n Loser: \"Hungary\",\n LosScore: 2\n},\n{\n Location: \"Brazil\",\n Year: 1950,\n Winner: \"Uruguay\",\n WinScore: 2,\n Loser: \"Brazil\",\n LosScore: 1\n},\n{\n Location: \"Switzerland\",\n Year: 1954,\n Winner: \"West Germany\",\n WinScore: 3,\n Loser: \"Hungary\",\n LosScore: 2\n}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`The above code modifies the jsfiddle by separating out the data source, and by changing \\`var tbody = document.getElementById(\"matchData\");\\` to \\`var tbody = matchData_fiddle.querySelector('tbody');\\` so that the table draws on notebook load without having to run the cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"