How to insert data JSON in JavaScript variable to datatable

Question

I have data JSON result from ajax jQuery, I save in variable and then i want JSON in variable insert into datatable, but now which insert is data json from url.

I tried to change the variable value with variable result myjson, but still didn't work. This my code:

JavaScript

<script>
    var myTable = $('#my_logs').DataTable({
        "paging": true,
        "lengthChange": true,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": true,
        "data": [],
        "columns": [{
            "title": "Date",
            "data": "log_time"
        }, {
            "title": "User Name",
            "data": "user_name"
        }, {
            "title": "Class",
            "data": "class_name"
        }, {
            "title": "Function",
            "data": "class_function"
        }, {
            "title": "Action",
            "data": "action_title"
        }, {
            "title": "Description",
            "data": "action_description"
        }]
    });

    $(document).ready(function() {
        $("#search").click(function() {
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').val();
            console.log(start_date);
            console.log(end_date);                

            if(startDate != '' && endDate !='')
            {
                var startDate = new Date(start_date);
                var endDate = new Date(end_date);
                let url = 'http://localhost/APICI/index.php/api/cektable';
                    fetch(url)
                    .then(res => res.json())
                    .then((out) => {
                        var resultProductData = out.filter(function(a) {
                            var createdAt = new Date(a.log_time);
                            if( createdAt >= startDate && createdAt <= endDate ) 
                            return a; 
                        });
                        console.log(resultProductData);
                        $.ajax({
                            url: 'http://localhost/APICI/index.php/api/cektablee',
                            data: {
                                json: JSON.stringify(resultProductData)
                            },
                            type: "POST",
                            timeout: 30000,
                            dataType: "json", // "xml", "json"
                            success: function(logs) {
                                myTable.clear();
                                $.each(logs, function(index, value) {
                                    myTable.row.add(value);
                                });
                                myTable.draw();
                            },
                            error: function(jqXHR, textStatus, ex) {
                                alert(textStatus + "," + ex + "," + jqXHR.responseText);
                            }
                        });
                    })
                .catch(err => { throw err });
            }
            else
            {
                alert("Both Date is Required");
            }
        });
    });
</script>

I want which insert to datatable is value json in variable resultProductData but now the result is json from url in ajax http://localhost/APICI/index.php/api/cektablee

This the result json from variable resultProductData json data result var but this the result in datatable json data result url

Answer 1

This might help you out:

tested and data is appending properly, please let me know if any query

 <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href=" https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css"> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script> <!-- DataTables --> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <html> <body> <div class="container"> <table id="my_logs" class="table table-striped table-bordered" style="width:100%"> <thead> </thead> <tbody> </tbody> </table> </div> </body> <script type="text/javascript"> $(document).ready(function () { var myTable = $('#my_logs').DataTable({ "paging": true, "lengthChange": true, "searching": true, "ordering": true, "info": true, "autoWidth": true, "data": [], "columns": [{ "title": "Date", "data": "log_time" }, { "title": "User Name", "data": "user_name" }, { "title": "Class", "data": "class_name" }, { "title": "Function", "data": "class_function" }, { "title": "Action", "data": "action_title" }, { "title": "Description", "data": "action_description" }] }); var logs = [{ "log_time": "2019-08-27", "user_name": "Me", "class_name": "login", "class_function": "authentication", "action_title": "User login", "action_description": "I am logged in" }, { "log_time": "2019-08-17", "user_name": "me", "class_name": "dashboard", "class_function": "index", "action_title": "Admin dashboard", "action_description": "I am logged in" }]; myTable.clear(); $.each(logs, function(index, value) { myTable.row.add(value); }); myTable.draw(); }); </script> </html>