JSON数据无法在HTML表格显示的技术求助
问题:Fetch加载JSON数据后无法在HTML表格中可视化展示
我尝试将contas.json文件中的数据输出到HTML表格中,已实现按字段类型划分的搜索过滤功能(手动添加测试数据时过滤可正常工作),但通过fetch加载JSON数据后,数据无法在创建的HTML页面中可视化展示,不清楚问题出在哪里,恳请提供帮助。相关代码如下:
HTML代码(仅数据展示部分)
<head> <title>Page Test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap.min.css"> <script src="jquery-3.6.3.slim.min.js"></script> <script src="tablesearch.js"></script> <script src="script.js"></script> </head>
<div class="row"> <div class="col-sm-12"> <input type="text" class="myInput" onkeyup="searchTable(this.value, 'list')" placeholder="Buscar en la tabla completa..." title="Search"> <input type="text" class="myInput" onkeyup="searchTable(this.value, 'list', 0)" placeholder="Seleccionar por país..." title="Search"> <input type="text" class="myInput" onkeyup="searchTable(this.value, 'list', 1)" placeholder="Seleccionar por ciudad..." title="Search"> <input type="text" class="myInput" onkeyup="searchTable(this.value, 'list', 2)" placeholder="Seleccionar por cuenta..." title="Search"> <table id="list" class="table table-striped"> <thead> <tr> <th>País</th> <th>Ciudad</th> <th>Cuenta</th> <th>URL</th> </tr> </thead> <tbody id="stats-output"> </tbody> </table> </div> </div>
JavaScript代码(script.js)
fetch("contas.json") .then(function (response) { return response.json(); }) .then(function (contas) { let placeholder = document.querySelector("#stats-output"); let out = ""; for (let conta of contas) { out += ` <tr> <td>${conta.Country_Code}</td> <td>${conta.Account_City}</td> <td>${conta.Account_Name}</td> <td> <a href="${conta.Account_Link}"> Clic aquí </a></td> </tr> `; } placeholder.innerHTML = out; });
表格搜索JavaScript代码
注:仅作信息参考,手动添加如下测试数据时过滤功能可正常工作:
<tr> <td>AR</td> <td>Ciudad</td> <td>Cuenta</td> <td>Encuesta Link</td> </tr>
function searchTable(input, tableId, searchColumn = -1, searchColumn2 = -1, searchColumn3 = -1) { var filter = input.toUpperCase(); var table = document.getElementById(tableId); var rowText, rowText2, rowText3; //temporary var for (var i = 0, row; row = table.rows[i]; i++) { //iterate through rows if (searchColumn == -1) //by default, search all columns { if (i != 0) { //don't perform search on the first row header rowText = row.innerHTML; //get text for the whole row if (rowText.toUpperCase().indexOf(filter) > -1) { //if upper case matches any part of filter row.style.display = ""; } else { row.style.display = "none"; } } } else { if (i != 0) { //don't perform search on the first row header if (searchColumn3 != -1) { //3 category search rowText = row.cells[searchColumn].innerHTML; //get text for the 1st column rowText2 = row.cells[searchColumn2].innerHTML; //get text for the 2nd column rowText3 = row.cells[searchColumn3].innerHTML; //get text for the 3rd column if (rowText.toUpperCase().indexOf(filter) > -1 || rowText2.toUpperCase().indexOf(filter) > -1 || rowText3.toUpperCase().indexOf(filter) > -1) { //if upper case matches any part of filter row.style.display = ""; } else { row.style.display = "none"; } } else if (searchColumn2 != -1) { //2 category search rowText = row.cells[searchColumn].innerHTML; //get text for the 1st column rowText2 = row.cells[searchColumn2].innerHTML; //get text for the 2nd column if (rowText.toUpperCase().indexOf(filter) > -1 || rowText2.toUpperCase().indexOf(filter) > -1) { //if upper case matches any part of filter row.style.display = ""; } else { row.style.display = "none"; } } else { //single category search rowText = row.cells[searchColumn].innerHTML; //get text for the target column if (rowText.toUpperCase().indexOf(filter) > -1) { //if upper case matches any part of filter row.style.display = ""; } else { row.style.display = "none"; } } } } } }
JSON数据示例(contas.json)
[ { "Account_ID": "00000000000QAI", "Account_Name": "Test Test", "Country_Code": "AR", "Account_City": "25 de Mayo", "Form_Link": "https://test.com", "ID_Link": "?AccountID=00000000000QAI", "Account_Link": "https://test.com?AccountID=00000000000QAI" } ]
内容的提问来源于stack exchange,提问作者Zaratt
相关产品推荐
相关产品推荐

