将Json数据作为对象发送到DataTables

Question

I have been trying to use DataTables. But after my Ajax request i get a Json object which i cannot pass into dataTables.

The Json object i receive is the following

{"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/"}}

Following is my HTML code

<table id="myTable" class="display" cellspacing="0" width="90%">
    <thead>
        <tr>
            <th>Medication</th>
            <th>Medication Quantity</th>
            <th>Mediaction Cost</th>
            <th>Purchase Date</th>
            <th>Expiry Date</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Medication</th>
            <th>Medication Quantity</th>
            <th>Mediaction Cost</th>
            <th>Purchase Date</th>
            <th>Expiry Date</th>
        </tr>
    </tfoot>
</table>

The Ajax request i do is the following

$(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 the output i am currently getting

Answer 1

Try mapping the data to remove the attributes property of each object

success : function(data) {
   data.data = data.data.map(function(item){
      return item.attributes;
  });
  assignToEventsColumns(data);
}

Answer 2

You were very nearly there:

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

All you were missing was the structure of your JSON, you needed to add attributes. as well as your data.data :-D.Working JSFiddle here .