Question

我一直在尝试使用DataTables。但是在我的Ajax请求之后，我得到了一个Json对象，我无法将其传递给dataTables。

我收到的Json对象是以下

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

以下是我的HTML代码

<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>

我做的Ajax请求如下

$(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

尝试映射数据以删除每个对象的attributes属性

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

Answer 2

你几乎就在那里：

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"
        }]
    })
}

您遗失的只是JSON的结构，您需要添加attributes.以及data.data：-D.Working JSFiddle here。

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

2 个答案: