Trouble showing dataTable data on modal view by selecting and displaying using boostrap

jpcastillo2

Hi. I have this code AND I HAVE NO IDEA why the model is not displaying the info. In postman the api returns the right structure so now i have no idea what could possible be.

@{
ViewBag.Title = "CompletedRequestes";
}

User Administrator

@* Id*@ Request ID SBU Server Requester Request Date Status Action View

-----------------MODAL VIEW FOR COMPLETED REQUEST IN SELECTED ROW

<

div class="modal fade" id="showComplete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">

Check Complete History

1ID	2Request ID	3Approval Phase	4Comment	5Approval User	6Approval Date	7Status	8Execution

Complete

@*

Close

*@

@section scripts{

<script>
    var frmRequest = $("#frmRequest");
    frmRequest.validate();
    $(document).ready(function () {
        var id = 0;
        var modalTable;
        var login = localStorage.getItem("user");
        var requestTable = $('#completedRequestStatus').DataTable({
            ajax: { url: '@Url.Content("~/api/CompletedRequests/Get/0/")' + login, type: 'GET', dataSrc: '' },
            responsive: true,
            autoWidth: false,
            columns: [
            { data: 'id' },
            { data: 'server.sbu.name' },
            { data: 'server.name' },
            { data: 'requester.login' },
            { data: 'created' },
            { data: 'status.name' }
            ],
            "columnDefs": [
            {
               // if()
             "targets": 6,
             "data": null,
             'defaultContent': '<td class="center"><p data-placement="top" data-toggle="tooltip" title="Execution"><button id="btnCOMPLETETASK" class="btn btn-primary btn-xs" data-title="Edit" ><i class="fa fa-pencil"> <span>Completed'+id+'</span></i></button></p></td>'
            }],
            select: {
                style: 'single'
            }
        });

// ----------------------VISUALIZACION DE SELECCION DE FILAS EN COMPLETED REQUEST ----------------------------
$('#completedRequestStatus tbody').on('click', 'tr', function () {
var data;
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$(this).removeClass('active');
}
else {
requestTable.$('tr.selected').removeClass('selected');
requestTable.$('tr.active').removeClass('active');
$(this).toggleClass('selected');
$(this).toggleClass('active');
}
return false;
});

        $('#showComplete').on('hidden.bs.modal', function () {
            // close modal view on exit or hide
            console.log('CLOSING');
            modalTable.destroy();
        })

        $('#showComplete').on('shown.bs.modal', function (e) {
            //Call your Function here
            console.log("CALLING ");
            console.log(data);
            console.log(data.id);
            //modalTable = $('#completeHistory').DataTable();
        });

        $("#btnStatusView").click(function () {
            var login = localStorage.getItem("user");
            var row = requestTable.rows('.selected').data();
            var data = row[0];
            modalTable = $('#completeHistory').dataTable(
            {
                ajax: { url: '@Url.Content("~/api/CompletedRequests/CompleteHistory/")' + data.id + "/" + login, type: 'GET', dataSrc: '' },
                responsive: true,
                //retrieve: true,
                autoWidth: false,
                colums: [
                    {data: 'id', "defaultContent": "<i>Not set</i>"
                    },
                    {data: 'c.request.id', "defaultContent": "<i>Not set</i>"
                    },
                    {data: 'c.approvalPhase.name', "defaultContent": "<i>Not set</i>"
                    },
                    {data: 'c.comment', "defaultContent": "<i>Not set</i>"
                    },
                    {data: 'c.user.login', "defaultContent": "<i>Not set</i>"
                    },
                    {data: 'c.modificationDate', "defaultContent": "<i>Not set</i>"
                    },
                    {data: 'c.status', "defaultContent": "<i>Not set</i>"
                    },
                    {data: 'c.status', "defaultContent": "<i>Not set</i>"
                    }
                ],
                select: { style: 'single' }
            });

        });

    });
    var frmLog = $("")
</script>

}