如何在DataTable中展示Ajax返回的嵌套双列表JSON数据？

你的核心问题是返回的JSON包含两个独立的关联数组，而DataTable需要每行对应一条合并后的完整记录。要实现同时展示两个列表的关联数据，得先在dataSrc里把两个数组按ProductKey合并，再传给DataTable。

步骤1：修改dataSrc合并数据 #

在ajax配置的dataSrc函数中，先把ProductGrabBagPlan转成以ProductKey为键的映射表，再遍历ProductData匹配对应的计划数据，生成合并后的数组：

ajax: {
    url: _Url,
    type: "GET",
    "dataSrc": function (jsonObj) {
        // 将计划列表转为键值对，快速查找对应ProductKey的PlanID
        const planMapping = jsonObj.ProductGrabBagPlan.reduce((map, item) => {
            map[item.ProductKey] = item.PlanID;
            return map;
        }, {});

        // 合并产品数据与对应计划数据
        const mergedRows = jsonObj.ProductData.map(product => {
            return {
                ProductKey: product.ProductKey,
                ProductID: product.ProductID,
                PlanID: planMapping[product.ProductKey] || '无匹配计划' // 处理无对应计划的情况
            };
        });

        return mergedRows;
    }
},

步骤2：调整Columns配置 #

现在每行数据已经包含所有需要的字段，直接指定字段名即可：

columns: [
    { data: "ProductKey", title:"Key", visible: true },
    { data: "PlanID", title: "Id", visible: true },
    // 可选：添加产品ID列
    { data: "ProductID", title: "产品ID", visible: true }
],

注意事项 #

• 你的C#类定义中是ProductPlan，但返回的JSON里字段名是ProductGrabBagPlan，要确保两者名称一致，否则会找不到计划数据。
• 如果存在一个产品对应多个计划的情况，需要调整合并逻辑（比如将多个PlanID用逗号分隔），当前代码默认一个产品对应一个计划。

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