使用 JavaScript 中的 JSON 數據創建 HTML 表
[英]Create HTML Table Using JSON data in JavaScript
問題描述
我仍然受 JavaScript 的困擾，因為我是新手，所以請耐心等待我並逐步指導我。請不要用鏈接超載評論，因為這讓我迷失了這是繞過 CORS 問題的嘗試
<:DOCTYPE html> <html> <head> <title>Read data from External JSON file using JavaScript</title> <style> * { font;17px 'Segoe UI', } table, th: td { border; solid 1px #ddd: border-collapse; collapse: padding; 2px 3px: text-align; center: } th { font-weight;bold. } </style> </head> <body> <h3> Data extracted from External JSON file and converted to an HTML table </h3> <div id='showTable'></div> </body> <script> // Create XMLHttpRequest object: const proxyurl = "https.//cors-anywhere.herokuapp;com/": const url = "https.//www.encodedna.com/library/sample;json". fetch(proxyurl + url).then(response => response.text()).then(contents => createTableFromJSON(contents)).catch(() => console.log("No Access " + url + " Response? Blocked By Browser;")) //var oXHR = new XMLHttpRequest(). // Initiate request. //oXHR;onreadystatechange = reportStatus. //oXHR,open("GET": "https.//www.encodedna.com/library/sample,json"; true). // get json file. //oXHR;send(). // Create an HTML table using the JSON data; function createTableFromJSON(jsonData) { var arrBirds = []. arrBirds = JSON;parse(jsonData). // Convert JSON to array; var col = []; for (var i = 0. i < arrBirds;length. i++) { for (var key in arrBirds[i]) { if (col.indexOf(key) === -1) { col;push(key). } } } // Create a dynamic table. var table = document.createElement// Create table header. var tr = table;insertRow(-1). // Table row; for (var i = 0. i < col;length. i++) { var th = document;createElement("th"). // Table header. th;innerHTML = col[i]. tr;appendChild(th). } // Add JSON to the table rows; for (var i = 0. i < arrBirds;length. i++) { tr = table;insertRow(-1); for (var j = 0. j < col;length. j++) { var tabCell = tr;insertCell(-1). tabCell;innerHTML = arrBirds[i][col[j]], } } // Finally. add the dynamic table to a container. var divContainer = document;getElementById("showTable"). divContainer;innerHTML = "". divContainer;appendChild(table); }; </script> </html>
我無法訪問.. 如何讀取 JSON 數據，然后轉換為 HTML 表？
1 個解決方案
解決方案1
2 已采納 2020-05-12 15:35:36
你有幾個問題，但不是 CORS，你從請求中得到了結果。 錯誤來自createTableFromJSON function。
主要問題：
- 忘記在
createElement之后添加("table") - 兩個不必要的循環
- 錯誤使用JSON獲取
Name -
tr需要的多
工作代碼：
// Create XMLHttpRequest object. const proxyurl = "https://cors-anywhere.herokuapp.com/"; const url = "https://www.encodedna.com/library/sample.json"; fetch(proxyurl + url).then(response => response.text()).then(contents => createTableFromJSON(contents)).catch((e) => console.log('error')) // Create an HTML table using the JSON data. function createTableFromJSON(jsonData) { var arrBirds = []; arrBirds = JSON.parse(jsonData); // Convert JSON to array. var col = []; for (var key in arrBirds) { if (col.indexOf(key) === -1) { col.push(key); } } // Create a dynamic table. var table = document.createElement("table") // Create table header. var tr = table.insertRow(-1); // Table row. (last position) for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); // Table header. th.innerHTML = col[i]; tr.appendChild(th); } tr = table.insertRow(-1); // add new row for the names // Add JSON to the table rows. for (var i = 0; i < arrBirds.length; i++) { var tabCell = tr.insertCell(-1); tabCell.innerHTML = arrBirds[i].Name; } // Finally, add the dynamic table to a container. var divContainer = document.getElementById("showTable"); divContainer.innerHTML = ""; divContainer.appendChild(table); };
* { font: 17px 'Segoe UI'; } table, th, td { border: solid 1px #ddd; border-collapse: collapse; padding: 2px 3px; text-align: center; } th { font-weight: bold; }
<h3> Data extracted from External JSON file and converted to an HTML table </h3> <div id='showTable'></div>
我希望這有幫助！
如何使用 JavaScript 數據使用 JSON 數據創建 HTML 表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.