使用jQuery遍历多维JSON数组并展示表格数据的问题

首先你代码里有个语法错误：url: ""这行末尾少了逗号，先补上，不然Ajax调用会直接报错。

你看到控制台输出[object Object]是因为data.payouts[i]本身是嵌套对象，比如data.payouts.confirmed对应{"2023-04-05":36253}，直接打印对象就会显示这个默认字符串。要拿到里面的日期和金额，得再嵌套一层遍历。

下面是修正后的代码，同时实现把数据渲染到表格里：

$.ajax({
    type: "GET",
    url: "", // 这里填你的实际接口地址
    dataType: 'json',
    success: function(data) {
        // 先准备表格结构
        let tableHtml = '<table border="1"><thead><tr><th>状态</th><th>日期</th><th>金额</th></tr></thead><tbody>';
        
        // 遍历payouts的外层状态（confirmed/submitted/pending_submission）
        for(let status in data.payouts) {
            // 遍历当前状态下的日期-金额键值对
            for(let date in data.payouts[status]) {
                let amount = data.payouts[status][date];
                // 拼接表格行
                tableHtml += `<tr><td>${status}</td><td>${date}</td><td>${amount}</td></tr>`;
            }
        }
        
        tableHtml += '</tbody></table>';
        // 把表格插入到页面某个容器里，比如id为payout-table的元素
        $('#payout-table').html(tableHtml);
        
        // 如果要在控制台打印详细数据，可以这么写
        console.log("payout明细：");
        for(let status in data.payouts) {
            console.log(`--- ${status} ---`);
            for(let date in data.payouts[status]) {
                console.log(`${date}: ${data.payouts[status][date]}`);
            }
        }
    },
    error: function(xhr, status, error) {
        console.error("请求出错：", error);
    }
});

说明： #

• 外层循环遍历 payout 的状态类型（已确认、已提交、待提交），内层循环遍历每个状态下的日期和对应金额
• 动态拼接HTML表格代码，最后插入到页面指定容器（需要你在页面里加一个<div id="payout-table"></div>或者直接用表格元素）
• 控制台打印部分改成了分层输出，能清晰看到每个状态下的明细数据

另外如果想处理顶部的confirmed和not_confirmed汇总数据，也可以在表格上方加一行汇总展示：

// 增加汇总行
let summaryHtml = `<div>已确认总金额：${data.confirmed} | 未确认总金额：${data.not_confirmed}</div>`;
$('#payout-table').before(summaryHtml);

内容的提问来源于stack exchange，提问作者charlie