Can not display data into datatables - Using Sqlite3 database and AJax

samcool2010

This is my Ajax code

    $(document).ready(function () {
        $.ajax({
            url : '/api/medical_inventory/',
            type : 'GET',
            dataType : 'json',
            success : function(data) {
                assignToEventsColumns(data);
            }
        });

        function assignToEventsColumns(data) {
            var table = $('#myTable').dataTable({
                "bAutoWidth" : false,
                "aaData" : data,
                "columns" : [ {
                    "data" : "medication"
                }, {
                    "data" : "quantity"
                }, {
                    "data" : "cost"
                }, {
                    "data" : "purchasedate"
                }, {
                    "data" : "expirydate"
                } ]
            })
        }
    });

This is what my json input looks like when the GET request is processed

{"data": [{"attributes": {"purchasedate": "04/01/2017", "medication": "meds", "cost": 100.0, "expirydate": "04/03/2017", "quantity": 100.0}, "type": "medical_inventory"}, {"attributes": {"purchasedate": "04/01/2017", "medication": "Extra Meds", "cost": 100.0, "expirydate": "04/02/2017", "quantity": 100.0}, "type": "medical_inventory"}, {"attributes": {"purchasedate": "04/01/2017", "medication": "Extra Super Meds", "cost": 267.0, "expirydate": "04/11/2017", "quantity": 250.0}, "type": "medical_inventory"}], "links": {"self": "/medical_inventory/"}}

I suspect I somehow have to tell ajax that the data I am looking for is within data.attributes, but that is where my problem lies. I have tried adding data.data.attribute, data.attribute, and attribute all over the place trying to let ajax know that is where you can find the meds,quantity,cost, etc.

I just haven't figured out the exact syntax and where that syntax needs to be to get into the attribute level of my json.

kthorngren

Changing your data assignment and column definition to this may work:

            data: data.data,
            "columns" : [ {
                "data" : 'attributes.medication'
            }, {
                "data" : 'attributes.quantity'
            }, {
                "data" : 'attributes.cost'
            }, {
                "data" : 'attributes.purchasedate'
            }, {
                "data" : 'attributes.expirydate'
            } ] 

Another option may be to flatten out the data using a loop within the success function of the ajax request.

Kevin

samcool2010

Thank you very much! Such an easy fix!!