如何使用 Jquery 将 json 对象数据映射到数据表

Question

I have a JSON object data that am getting from an api call.我有一个从 api 调用中获取的 JSON 对象数据。 How can I map it to two columns.如何将其映射到两列。 This is the JSON Object这是 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"
    }
]

Whenever I try to map it I get a datatable error每当我尝试映射它时，我都会收到数据表错误

DataTables warning: table id=tableBody - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4 DataTables 警告：table id=tableBody - 为第 0 行第 0 列请求未知参数“0”。有关此错误的更多信息，请参阅http://datatables.net/tn/4

This is my implementation这是我的实现

$.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
                                    }

How can I display the json object to the datatable correctly, an help is appreciated如何正确地将 json 对象显示到数据表中，不胜感激

Answer 1

change your list object to list array, it should be like将您的列表对象更改为列表数组，它应该像

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

snippet片段

 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

Another working example with plain json file:另一个使用纯 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>

where data/data.json - json file with data above其中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