如何在HTML表格中加载多个JSON feed并添加表格表头

修改后可直接运行的完整代码 #

<body>
<section>
    <h1>Big Flower profit calculator</h1>
</section>
<div id="ResultArea"></div>

<!-- 如果页面已经引入jQuery可删除此行 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
    var proxy = "https://api.allorigins.win/get?url=";
    // 所有请求URL放入数组统一管理
    var urlList = [
        "https://whattomine.com/coins/151.json?hr=505.0&p=1800.0&fee=0.0&cost=0.12&hcost=0.0&span_br=1h&span_d=24",
        "https://whattomine.com/coins/321.json?hr=2100.0&p=430.0&fee=0.0&cost=0.12&hcost=0.0&span_br=1h&span_d=24",
        "https://whattomine.com/coins/334.json?hr=3200.0&p=410.0&fee=0.0&cost=0.12&hcost=0.0&span_br=&span_d=24",
        "https://whattomine.com/coins/164.json?hr=350.0&p=324.0&fee=0.0&cost=0.12&hcost=0.0&span_br=&span_d=24"
    ];
    let list = [];
    // 初始化表格容器
    var table = $("<table id='DynamicTable' border='1'></table>").appendTo("#ResultArea");

    // ========== 此处插入表格表头 ==========
    var headerRow = $("<tr></tr>").appendTo(table);
    $("<th>币种标签</th>").appendTo(headerRow);
    $("<th>当前难度</th>").appendTo(headerRow);
    $("<th>24小时难度</th>").appendTo(headerRow);
    $("<th>收入</th>").appendTo(headerRow);
    $("<th>成本</th>").appendTo(headerRow);
    $("<th>利润</th>").appendTo(headerRow);

    // ========== 批量处理多请求逻辑 ==========
    var requestList = urlList.map(url => $.getJSON(proxy + url));
    $.when.apply($, requestList).done(function() {
        // 遍历所有请求返回结果
        for(var i=0; i<arguments.length; i++) {
            var data = arguments[i][0];
            var res = JSON.parse(data.contents);
            list.push(res);
        }
        // 统一渲染所有数据行
        $.each(list, function (i, value) {
            var row = $("<tr></tr>").appendTo(table);
            $("<td></td>").text(value.tag).appendTo(row);
            $("<td></td>").text(value.difficulty).appendTo(row);
            $("<td></td>").text(value.difficulty24).appendTo(row);
            $("<td></td>").text(value.revenue).appendTo(row);
            $("<td></td>").text(value.cost).appendTo(row);
            $("<td></td>").text(value.profit).appendTo(row);
        });
    });
});
</script>
</body>

对应问题解决说明 #

1. 多JSON feed数据合并到同表格的实现逻辑

• 将所有需要请求的feed地址存入数组统一管理，减少重复代码
• 用$.when()方法等待所有异步请求全部返回后再统一处理数据，避免请求返回时序不同导致的渲染错乱
• 所有请求返回的结果解析后存入同一个数组，批量渲染到表格中即可

2. 表头插入位置

直接在表格初始化完成后、数据行渲染之前的位置插入表头即可，如代码中标注的位置。这个位置插入的表头会固定在表格第一行，后续所有数据行都会自动排在表头下方，仅需保证<th>的顺序和后续数据列的顺序对应即可。

内容的提问来源于stack exchange，提问作者Gábor Virág