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"}
            
        ]
    } );
} );

<script language="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js" type="text/javascript"></script>


<table id="example" class="display" style="width:100%">

        <thead>
            <tr>
                <th>Name</th>
                
                
                
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                
                
            </tr>
        </tfoot>
    </table>

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" },

    ]
} );

});