DataTables Jquery Ajax对象找不到数组列

Question

我正在尝试使用带有 Ajax 数据源的 jquery.dataTables 将 json 数据拉入 html 表中。我面临一个问题，它无法在 JSON 响应中找到我正在寻找的数据，我正在努力寻找我的问题所在。我收到一个未定义的错误，因为它无法匹配我请求的数据列。在 Snipped-I 中删除了 URL，但这里是返回的对象结构的示例。{    "success": true,    "result": [        {            "type": "gift",            "name": "Gift",            "rewards": [                {                    "name": "Item Name",                    "image_url": "https://xxx.jpg",                    "minimum_display_price": "500+ bucks",                    "description": {                        "text": "text here",                        "html": "html here"                    },                    "disclaimer_html": "disclaimer",                    "warning": null,                    "denominations": [                        {                            "id": "5ca1737f1sdasdsadsad2cb5f004cc0d564",                            "name": "Name",                            "price": 500,                            "display_price": "500",                            "available": true                        }                    ]                }            ]        }    ]}$(document).ready(function() {    $('#example').DataTable( {        "ajax": "myurlishere",        "columns": [             { "result[0]": "name" }            //{ "result": "rewards.name"}            // {"data": "name"}                    ]    } );

Answer 1

看起来您有一些嵌套的数据对象，虽然可以直接在 DataTable 中处理这个问题，但在将数据交给 DataTable 进行渲染之前预处理数据可能更容易。这会将您的嵌套数据转换为奖励对象的平面数组，这将使渲染变得更容易。

(async function() {

    const rawData = await fetch("your_url").then(data => data.json());

    const finalData = rawData.result.map(category => category.rewards).flat(1);

    $("#example").DataTable({

        data: finalData,

        columns: [{ data: "name" }]

    });

})();

Answer 2

可能是您需要更改代码，只需检查以下方式，

$(document).ready(function() {

$('#example').DataTable( {

    "ajax": "myurlishere",

    "columns": [

        { "data": "name" },

        { "data": "rewards[, ].name" },

        { "data": "rewards[, ].image_url" },

        { "data": "rewards[, ].description.text" },

        { "data": "rewards[, ].denominations[,].name" },

    ]

} );

} );