Using DataTables with AWS API Gateway

dataphpmysql

Hello everyone,

So I'm trying to use DataTables' AJAX to get the json from API Gateway but is not working. I have tested both the Lambda function as well as the API Gateway and it shows I'm receiving the data correctly in json format. But for some reason I can't get that json data to appear on datatables.

I read the documentation and this works (getting the data from another file):

<script>
    $(document).ready(function () {
        $('#dtBasicExample').DataTable({
            ajax: {                   
                url: 'Example.txt',
                dataSrc: ''
            },
            columns: [
                { "data": "projectID" },
                { "data": "name" },
                { "data": "type" },
                { "data": "description" },
                { "data": "assignee" },
                { "data": "dateDue" },
                { "data": "departmentID" }
            ]
        } );
        $('.dataTables_length').addClass('bs-select');
    });
</script>

But if I try get the data from API Gateway instead of a file, it doesn't show anything. I put the link from the 'Invoke URL' in the staging section of API Gateway (which whenever I click at the link it does show the ajax data). Here is an example:

<script>
    $(document).ready(function () {
        $('#dtBasicExample').DataTable({
            ajax: {
                method: 'GET',
                url: 'https://addressgoeshere.amazonaws.com/prod',
                dataSrc: ''
            },
            columns: [
                { "data": "projectID" },
                { "data": "name" },
                { "data": "type" },
                { "data": "description" },
                { "data": "assignee" },
                { "data": "dateDue" },
                { "data": "departmentID" }
            ]
        });
        $('.dataTables_length').addClass('bs-select');
    });
</script>

But nothing shows in the front end. Have anyone here successfully used the 'Invoke URL' of API Gateway to show the json data on datatables?

The errorr I guess could be a couple things but I think is likely something in the above code that I'm missing and not including. Perhaps I need to add 'success', 'content type', etc., inside the ajax?. Or maybe the lambda function needs to be async? I have it non-async since thats whats used with API Gateway but idk; however I don't think thats an issue though since I can see the data when testing api gateway.

Any help would be appreciated. Thanks!

kthorngren

I'm not sure about the API GW but you could post an example of the JSON response from the browser's developer tools.

Do you get any alert messages or console log errors?

Kevin

dataphpmysql

So I have two versions (one with JSON.stringify and one without it) They both give me the json on the web but neither show the data on datatables.

With JSON.stringify:
"[{\"projectID\":1,\"name\":\"Document Summary\",\"type\":\"analytics\",\"description\":\"Account Summary\",\"assignee\":\"Dwight\",\"dateDue\":\"2019-07-01T00:00:00.000Z\",\"departmentID\":3}]"

Without JSON.stringify:
[{"projectID":1,"name":"Document Summary","type":"analytics","description":"Account Summary","assignee":"Dwight","dateDue":"2019-07-01T00:00:00.000Z","departmentID":3}]

That's what they both show on the actual web (which is the 'Invoke URL' of API Gateway, which is what I'm putting in the Ajax URL). When I go to developer tools though, in the console they're both showing "Failed to load resource: the server responded with a status of 403 ()". Could that be an issue even though I'm seeing the data on the web?

Thanks.

kthorngren

If the browser is getting a 403 error then you will need to look at your server logs to find out why.

The "With JSON.stringify" looks like it is converting the data which is already a string, this the escaping (the backslashes) of the ". Which presumably means the "Without JSON.stringify" is already a JSON string and not a data variable (array or whatever). You will need to look at your server code to verify. The "Without JSON.stringify" is probably what you will need to use. But you will need to resolve the 403 error first.

Kevin

dataphpmysql

So after doing more research it turned out I needed to 'Enable CORS' on API Gateway and then deploy that and THEN use that URL. Web still shows 403 error on the console however it does show the data on the web and at least now the data appears on datatables.

However, now I have a new problem and is that the data shows on datatables but if I refresh the page, it disappears and says 'No data available in table'. if I refresh again, it does show the data again, if I refresh again then it does not show, etc (this pattern keep happening).

Here is the code:

<script>
    $(document).ready(function () {
        $('#dtBasicExample').DataTable({
            ajax: {
                method: 'GET',
                url: 'https://webaddressgoeshere.amazonaws.com/prod',
                dataSrc: ''
            },
            columns: [
                { "data": "projectID" },
                { "data": "name" },
                { "data": "type" },
                { "data": "description" },
                { "data": "assignee" },
                { "data": "dateDue" },
                { "data": "departmentID" }
            ]
        });
        $('.dataTables_length').addClass('bs-select');
    });
</script>

Is there something I need to add to the datatable code in order for the table to always show the data even thoguh the page is refreshed?

Thanks.

kthorngren

Datatables will display the data provided. If it alternates then I suspect that the times it doesn't work you aren't receiving the expected data at the client. Is that when you get the 403 response? I would start with the developer tools to verify the request and response. Also take a look at the browser's console for errors.

Kevin