31:[] 2f:{"title":"How to Load Data Into Tables With the Fetch API in JavaScript","cells":[{"id":0,"value":"# How to Load Data Into Tables With the Fetch API in JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"This notebook is my notes for [this video tutorial](https://youtu.be/qBg8IB3u28s), but [Andrew Wooldridge](https://observablehq.com/@triptych) suggested [more suitable way](https://observablehq.com/@a1ip/fetch) to do it using [JS template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). I appreciate it!","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":3,"value":"\n \n \n

","pinned":true,"hidden":false,"mode":"html"},{"id":16,"value":"loadIntoTable(url, document.querySelector(\"table\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"async function loadIntoTable(url, table) {\n const tableHead = table.querySelector(\"thead\");\n const tableBody = table.querySelector(\"tbody\");\n const response = await fetch(url);\n const { headers, rows } = await response.json();\n // Clear the table\n tableHead.innerHTML = \"\";\n tableBody.innerHTML = \"\";\n // Populate the headers\n for (const headerText of headers) {\n const headerElement = document.createElement(\"th\");\n headerElement.textContent = headerText;\n tableHead.querySelector(\"tr\").appendChild(headerElement);\n }\n // Populate the rows\n for (const row of rows) {\n const rowElement = document.createElement(\"tr\");\n for (const cellText of row) {\n const cellElement = document.createElement(\"td\");\n cellElement.textContent = cellText;\n rowElement.appendChild(cellElement);\n }\n tableBody.appendChild(rowElement);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"dataURL = \"https://gist.github.com/a1ip/913b9d22622c8bd0a43dbb9a0f2df595/raw/data.json\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof proxy = Inputs.select(\n [\n \"\",\n \"https://observable-cors.glitch.me/\",\n \"https://cors-proxy.htmldriven.com/?url=\",\n \"https://cors-anywhere.herokuapp.com/\"\n ],\n {\n label: \"Select CORS proxy if fetch fails\",\n value: \"https://observable-cors.glitch.me/\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"url = proxy + dataURL","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}