javascript - 如何根据json数据重复列以进行数据表显示

Question

嗨，我有一个来自 AJAX 响应的 JSON 数据，它有嵌套数组。

[{
    "Solution": "MobileBroadband",
    "Operator": "MTN",
    "VNF": [{
        "vendor": "vendor1",
        "name": "product1",
        "release": "1.0"
    },
    {
        "vendor": "vendor3",
        "name": "prodc3",
        "release": "3.0"
    },
    {
        "vendor": "saef",
        "name": "vEPG",
        "release": "2.4"
    }]
},
{
    "Solution": "CLoud",
    "Operator": "Airtel",
    "VNF": [{
        "vendor": "vendor1",
        "name": "product1",
        "release": "1.0"
    },
    {
        "vendor": "vendor3",
        "name": "prodc3",
        "release": "3.0"
    }]
}]

如何将上述数据动态添加到数据表的列中。

我期待这样的事情:

Answer 1

首先，您需要设置 DataTables ajax相应选项:

$('#mytable').DataTable({
    ajax: {
        ...
        url: '/getdata' //URL to API that returns your JSON data
    }

});

接下来，您需要“展平”源 JSON 结构，以便它包含对象数组，其中每个属性对应于表列。为此，您可能需要使用 ajax.dataSrc选项(对收到的 JSON 进行后处理):

$('#mytable').DataTable({
    ajax: {
        url: '/getdata',
        dataSrc: rawJson => rawJson.map(entry => {
            entry.VNF.forEach((vnfEntry, vnfEntryIndex) => Object.entries(vnfEntry).forEach(vnfEntryProp => entry[vnfEntryProp[0] + vnfEntryIndex] = vnfEntryProp[1]));
            delete entry.VNF;
            return entry;
        })
    }
});

最后，您可能希望抑制 DataTables 警告，该警告会通知您某些列缺少数据(因为不同运营商拥有不同数量的 NFV vendor ):

$.fn.dataTable.ext.errMode = 'none';

但是您必须小心使用该选项，因为它会抑制来自 DataTables 引擎的所有错误通知。

对于完整的演示，您可能需要查看此 link .