29:null 2a:["$","title",null,{"children":"Simple HTML Table from JS Array | Alan David Garcia | Observable"}] 2f:[] 2d:{"id":"957e0b9617f775e3","slug":"simple-html-table-from-js-array","title":"Simple HTML Table from JS Array","thumbnail":"defa42f172f005c79ffccce3658b410023af898e2c08f81f2d451d9d0ada37ee","access_level":"public","create_time":"$D2019-08-20T05:45:39.467Z","update_time":"$D2019-08-20T05:49:00.582Z","view_time":null,"first_public_time":"$D2019-08-20T05:49:11.039Z","has_unpublished_edits":null,"fork":{"id":"b2e92d2aa8ba472d","slug":"simple-html-table-from-js-array","title":"Simple HTML Table from JS Array","owner":{"id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b303a442e7f4d979","login":"adg29","name":"Alan David Garcia","avatar_url":"https://avatars-next.observableusercontent.com/9986f4c71f0fd48221998c143420e87cc995869c7496ffcff6c4e1fc392f3614","tier":"starter_2024"},"version":148,"publish_version":148,"role":null,"authored":false,"authors":[{"type":"individual","id":"4f917008c4233b6e","login":"adg29","name":"Alan David Garcia","avatar_url":"https://avatars-next.observableusercontent.com/9986f4c71f0fd48221998c143420e87cc995869c7496ffcff6c4e1fc392f3614","tier":null}],"members":[{"type":"individual","id":"4f917008c4233b6e","login":"adg29","name":"Alan David Garcia","avatar_url":"https://avatars-next.observableusercontent.com/9986f4c71f0fd48221998c143420e87cc995869c7496ffcff6c4e1fc392f3614","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"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":"jsData = [\n {location:\"Uruguay\", year:1930, winner:\"Uruguay\", winScore:4, \n loser:\"Argentina\", losScore:2},\n {location:\"Italy\", year:1934, winner:\"Italy\", winScore:2, \n loser:\"Czechoslovakia\", losScore:1},\n {location:\"France\", year:1938, winner:\"Italy\", winScore:4, \n loser:\"Hungary\", losScore:2},\n {location:\"Brazil\", year:1950, winner:\"Uruguay\", winScore:2, \n loser:\"Brazil\", losScore:1},\n {location:\"Switzerland\", year:1954, winner:\"West Germany\", winScore:3, \n loser:\"Hungary\", losScore:2}\n]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"// Draw table from 'jsData' array of objects\ndrawTable = function drawTable(tbody) {\n var tr, td;\n tbody = matchData.querySelector('tbody');\n // loop through data source\n for (var i = 0; i < jsData.length; i++) {\n tr = tbody.insertRow(tbody.rows.length);\n td = tr.insertCell(tr.cells.length);\n td.setAttribute(\"align\", \"center\");\n td.innerHTML = jsData[i].year;\n td = tr.insertCell(tr.cells.length);\n td.innerHTML = jsData[i].location;\n td = tr.insertCell(tr.cells.length);\n td.innerHTML = jsData[i].winner;\n td = tr.insertCell(tr.cells.length);\n td.innerHTML = jsData[i].loser;\n td = tr.insertCell(tr.cells.length);\n td.setAttribute(\"align\", \"center\");\n td.innerHTML = jsData[i].winScore + \" - \" + jsData[i].losScore;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"drawTable(\"matchData\")","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":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"