How to map json object data to datatables using Jquery-CodePudding

I have a JSON object data that am getting from an api call. How can I map it to two columns. This is the JSON Object

[
    {
        "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

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

CodePudding user response：

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" >
  <thead>
    <tr>
      <th>uploadStatus</th>
      <th>labname</th>
    </tr>
  </thead>
  <tbody>
  <tr><td>xxx</td><td>yyy</td></tr>
  </tbody>
</table>

CodePudding user response：

Another working example with plain json file:

<!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"  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