如何使用 Jquery 將 json 對象數據映射到數據表

Question

我有一個從 api 調用中獲取的 JSON 對象數據。 如何將其映射到兩列。 這是 JSON 對象

[
    {
        "id": 322,
        "uploadStatus": 0,
        "labName": "CS Minhewene"
    },
    {
        "id": 323,
        "uploadStatus": 0,
        "labName": "CS Nacuale"
    },
    {
        "id": 324,
        "uploadStatus": 0,
        "labName": "CS Mesa"
    },
    {
        "id": 325,
        "uploadStatus": 0,
        "labName": "CS Metoro"
    },
    {
        "id": 326,
        "uploadStatus": 0,
        "labName": "CS Ngewe"
    },
    {
        "id": 327,
        "uploadStatus": 0,
        "labName": "CS Mariri"
    }
]

每當我嘗試映射它時，我都會收到數據表錯誤

DataTables 警告：table id=tableBody - 為第 0 行第 0 列請求未知參數“0”。有關此錯誤的更多信息，請參閱http://datatables.net/tn/4

這是我的實現

$.ajax({
                            type: 'GET',
                            contentType: "application/json; charset=utf-8",
                            url: 'api/getuploadbydistricts/'+this.name,
                            success: function (data) {
                                myJsonData = data;
                                console.log('data 2', myJsonData);
                                populateDataTable(JSON.stringify(myJsonData));
                                $('#tableBody').dataTable().fnDestroy();
                                },
                                 error: function (e) {
                                    console.log("There was an error with your request...");
                                    console.log("error: " + JSON.stringify(e));
                                    }
                                    });
                                    // populate the data table with JSON data
                                    function populateDataTable(data) {
                                        console.log("populating data table...");
                                        console.log('data 2', data.uploadStatus);
                                        $('#tableBody').dataTable().fnDestroy();
                                        $("#tableBody").DataTable().clear();
                                        $('#tableBody').dataTable().fnAddData( [
                                        data.uploadStatus,
                                        data.labName,
                                        ]);
                                        // clear the table before populating it with more data
                                    }

如何正確地將 json 對象顯示到數據表中，不勝感激

Answer 1

將您的列表對象更改為列表數組，它應該像

data = [
    [a, b],
    [c, d]
]

片段

 data = [{"id":322,"uploadStatus":0,"labName":"CS Minhewene"},{"id":323,"uploadStatus":0,"labName":"CS Nacuale"},{"id":324,"uploadStatus":0,"labName":"CS Mesa"},{"id":325,"uploadStatus":0,"labName":"CS Metoro"},{"id":326,"uploadStatus":0,"labName":"CS Ngewe"},{"id":327,"uploadStatus":0,"labName":"CS Mariri"}]; // change it to list array data = data.map(d=>[d.uploadStatus, d.labName]); populateDataTable(data); // populate the data table with JSON data function populateDataTable(data) { $("#tableBody").dataTable().fnClearTable(); $('#tableBody').dataTable().fnAddData(data); }

 <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script> <table id="tableBody" class="display"> <thead> <tr> <th>uploadStatus</th> <th>labname</th> </tr> </thead> <tbody> <tr><td>xxx</td><td>yyy</td></tr> </tbody> </table>

Answer 2

另一個使用純 json 文件的工作示例：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <title>Datatable example</title>

    <!--Bootstrap 4-->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    </style>
</head>

<body>

    <table id="tableId" class="display" width="100%">
        <thead>
            <tr>
                <th>Id</th>
                <th>Lab Name</th>
            </tr>
        </thead>
    </table>

<script
        src="https://code.jquery.com/jquery-3.5.1.js"
        crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap4.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

<script>
    $(document).ready(function () {
        $('#tableId').DataTable({
            ajax: {
                url: 'data/data.json',
                dataSrc: ''
            },
            columns: [
                { data: 'id' },
                { data: 'labName' },
            ],
        });
    });

</script>
</body>
</html>

其中data/data.json - 上面有數據的 json 文件

如何使用 Jquery 將 json 對象數據映射到數據表

問題描述

2 個解決方案

解決方案1
1 已采納 2022-07-11 07:38:24

解決方案2
1 2022-07-11 08:34:34

如何使用 Jquery 將 json 對象數據映射到數據表

問題描述

2 個解決方案

解決方案1 1 已采納 2022-07-11 07:38:24

解決方案2 1 2022-07-11 08:34:34

解決方案1
1 已采納 2022-07-11 07:38:24

解決方案2
1 2022-07-11 08:34:34