How to map json object data to datatables using Jquery

Question

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

uingtea · Accepted Answer · 2022-07-11 07:38:24Z

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>

answered Jul 11, 2022 at 7:38

uingtea

6,6342 gold badges32 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

andrewJames Over a year ago

There is no need to convert the array of objects to an array of arrays. DataTables can handle both structures just fine. See this answer, which also, incidentally, takes advantage of DataTables' built-in support for Ajax - and makes the code simpler.

IvanMikhalka · Accepted Answer · 2022-07-11 08:34:34Z

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

I think this is a better approach than the accepted answer, given the information provided in the question.

Collectives™ on Stack Overflow

How to map json object data to datatables using Jquery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related