JQuery datatable error?

Question

so i am getting the common error "DataTables warning: table id=myTable - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1". the solution I have tried online is not really working out for me. so basically I am testing a local JSON file and using data table ajax method to populate the table. i cant seem to figure out what i did wrong.

$(document).ready(function () {
    var request = new XMLHttpRequest();
    request.open("GET", "./test.json", false);
    request.send(null)
    var responseMain = JSON.parse(request.responseText);
    var my_array = responseMain.feed.entry;
    $("#totalnum").html(my_array.length);

    var obj_stage = [];
    $.each(my_array, function (index, value) {
        
        obj_stage.push(value.content.F_Form1);
        console.log("inside each", obj_stage)
    });


    console.log("out side each", obj_stage)
    console.log("what type",typeof obj_stage);


    $('#myTable').DataTable({
        "ajax": obj_stage,
        "columns": [
            { "data": obj_stage["-flowState"] },
            { "data": obj_stage["-flowState"] },
        ]
    });
});

//console.log("value",value.content.F_Form1["-flowState"])

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
    <script src="./test.js"></script>
</head>

<body>
    <h1 id="totalnum"></h1>
    <table id="myTable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Stage Name</th>
                <th>Asap ?</th>
            </tr>
        </thead>
    </table>
</body>

</html>

You can try, directly use data: obj_stage instead of ajax. — Sachi Tekina
– Sachi Tekina, Commented Jun 22, 2018 at 0:54

Sachi Tekina · Accepted Answer · 2018-06-22 01:31:23Z

You could directly call the object because it is already loaded in obj_stage.

No need to do this { "data": obj_stage["-flowState"] }, instead { "data": "-flowState" }, the first one would not populate the column because the objects were already in an array (and you can only access array by using its index), DataTables will to that for you just use its property name or the key.

$(document).ready(function () {
    var request = new XMLHttpRequest();
    request.open("GET", "./test.json", false);
    request.send(null)
    var responseMain = JSON.parse(request.responseText);
    var my_array = responseMain.feed.entry;
    $("#totalnum").html(my_array.length);

    var obj_stage = [];
    $.each(my_array, function (index, value) {
        obj_stage.push(value.content.F_Form1);
    });
    //if(my_array.length === obj_stage.length ){
        $('#myTable').DataTable({
            "data": obj_stage,
            "columns": [
                { "data": "-flowState" },
                { "data": "-flowState" },
            ]
        });
    //}
});

Collectives™ on Stack Overflow

JQuery datatable error?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related