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

如何从两个URL获取JSON数据并合并至单个表格?(附代码求助)

解决从两个API获取数据并整合为表格的问题

首先看你代码里的几个关键问题,这也是为什么没输出的原因:

  • $.when的done回调里,每个请求的返回值是一个数组[返回数据, 状态文本, jqXHR对象],所以你直接用result1拿到的不是JSON数据,得取result1[0]才是实际的接口返回内容
  • $.each不能同时遍历两个数据集,得先把两个数据源关联整合后再遍历

下面是修正后的完整代码,我假设两个数据集通过orderId字段关联(你可以根据实际的字段名调整):

var url1 = 'http://localhost:8080/WebService/rest/payment/get/payment'; 
var url2 = 'http://localhost:8080/WebService/rest/orderdetails/get/all'; 

$(document).ready(function() { 
    // 同时发起两个AJAX请求
    $.when($.getJSON(url1), $.getJSON(url2))
    .done(function(paymentResp, orderResp) {
        // 提取实际的JSON数据
        var paymentData = paymentResp[0];
        var orderData = orderResp[0];

        // 先构建订单详情的映射,方便快速查找(用orderId作为键)
        var orderMap = {};
        $.each(orderData, function(index, order) {
            orderMap[order.orderId] = order;
        });

        var table = $("#oTable");
        // 先清空表格(避免重复渲染)
        table.find("tbody").empty();

        // 遍历支付数据,匹配对应的订单详情
        $.each(paymentData, function(index, payment) {
            var matchedOrder = orderMap[payment.orderId];
            if (matchedOrder) {
                // 构建表格行
                var row = $("<tr></tr>");
                // 添加列,这里根据你的实际字段调整
                row.append($("<td></td>").text(payment.paymentId));
                row.append($("<td></td>").text(payment.amount));
                row.append($("<td></td>").text(matchedOrder.orderNumber));
                row.append($("<td></td>").text(matchedOrder.productName));
                // 把行添加到表格tbody
                table.find("tbody").append(row);
            }
        });
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
        // 处理请求失败的情况
        console.error("请求出错:", textStatus, errorThrown);
        alert("获取数据失败,请检查接口是否正常");
    });
});

另外还要注意:

  • 确保你的HTML里有对应的表格结构,比如:
<table id="oTable">
    <thead>
        <tr>
            <th>支付ID</th>
            <th>金额</th>
            <th>订单号</th>
            <th>商品名称</th>
        </tr>
    </thead>
    <tbody>
        <!-- 动态生成的行会在这里 -->
    </tbody>
</table>
  • 如果两个数据集没有直接的关联字段,你需要先明确数据之间的对应关系,再调整整合逻辑
  • 记得检查浏览器控制台的错误信息,比如是否有跨域问题、接口返回格式是否正确

内容的提问来源于stack exchange,提问作者user9569492

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.05.22 09:55:07