Senden von JSON-Daten als Objekt in DataTables

Question

Ich habe versucht, DataTables zu verwenden. Aber nach meiner Ajax-Anfrage bekomme ich ein Json-Objekt, das ich nicht in Datatables übergeben kann.

Das Json Objekt i erhalten, ist die folgende

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

Folgende ist mein 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> 

Die Ajax-Anfrage i das tun folgt

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

Sie fast da waren zu entfernen:

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

Alles, was Sie die Struktur Ihrer JSON fehlte war, Sie attributes. hinzufügen benötigt als sowie Ihre data.data: -D.Working JSFiddle here.

Answer 2

Versuchen Sie, die Daten Abbildung des attributes Eigenschaft jedes Objekts

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