You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.07 21:30:56