2e:null 2f:["$","title",null,{"children":"How to Load Data Into Tables With the Fetch API in JavaScript | Philippe Rigovanov | Observable"}] 34:[] 32:{"id":"a20771f0cd16c704","slug":"dcode-fetch-api-tutorial","title":"How to Load Data Into Tables With the Fetch API in JavaScript","thumbnail":"56751e666754ef62023341c2566e29e4ee485535b99fd6b14208708c1b0b599e","access_level":"public","create_time":"$D2021-08-18T09:51:57.582Z","update_time":"$D2021-08-19T13:19:40.753Z","view_time":null,"first_public_time":"$D2021-08-18T10:17:57.190Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"b5ee25cc13065361","login":"a1ip","name":"Philippe Rigovanov","avatar_url":"https://avatars-next.observableusercontent.com/6359e02dc30dad37dc8aeff508f64823d0f57f42e9b940688bdd1af508bb839c","tier":"starter_2024"},"version":70,"publish_version":70,"role":null,"authored":false,"authors":[{"type":"individual","id":"968f76daa2a26d11","login":"a1ip","name":"Philippe Rigovanov","avatar_url":"https://avatars-next.observableusercontent.com/6359e02dc30dad37dc8aeff508f64823d0f57f42e9b940688bdd1af508bb839c","tier":null}],"members":[{"type":"individual","id":"968f76daa2a26d11","login":"a1ip","name":"Philippe Rigovanov","avatar_url":"https://avatars-next.observableusercontent.com/6359e02dc30dad37dc8aeff508f64823d0f57f42e9b940688bdd1af508bb839c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"\n \n \n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"loadIntoTable(url, document.querySelector(\"table\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"dataURL = \"https://gist.github.com/a1ip/913b9d22622c8bd0a43dbb9a0f2df595/raw/data.json\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"url = proxy + dataURL","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"