Füllen Sie Daten in Spalten von Datatables

Question

Ich bekomme eine Json-Objekt-Antwort vom Server, aber nicht in der Lage, die Daten in Spalten zu rendern. Schätzen Sie Ihre Hilfe.

JSON OBJECT RESPONSE: 
{ 
"CHD2": { 
"POSName": "CHANDIGARH INDU. AREA-I", 
"HODB": "QSR_PHASE-I_CHANDIGARH" 
}, 
"D002": { 
"POSName": "DEHRADUN-ASTLEY HALL", 
"HODB": "QSR_DEHRADUN_ASTLEY" 
}, 
"J002": { 
"POSName": "VAISHALI NAGAR", 
"HODB": "QSR_VAISHALI_NAGAR" 
} 
} 

JQUERY SCRIPT

<script> 
    $(document).ready(function() { 
    console.log('Initializing tables...'); 
    var <a href="//legacy.datatables.net/ref#aaData">aaData</a> = []; 
     $('#dataTables-example').DataTable({ 
      responsive: true, 
      processing: true, 
      serverSide: true, 
      data : aaData, 
      ajax: { 
       url:'http://localhost:81/reporting/outletList.php', 
       type:'POST', 
       dataType:'json', 
       dataSrc : "", 
       error: function(errorThrown){ 
        alert(errorThrown); 
        alert("There is an error with AJAX!"); 
       }, 
      "success": function(data) { 
           console.log(data); 
       aaData.push([ 
         data['CHD2'].POSName, 
         data['CHD2'].HODB 
        ]); 
       aaData.push([ 
        data['D002'].POSName, 
        data['D002'].HODB 
       ]); 
       data = aaData; 
       console.log(data); 
      }}, 
      /*columns: [ 
       { data: "POSName"}, 
       { data: "HODB"} 
      ],*/ 
      "language": { 
      "zeroRecords": "No records to display" 
      } 
      }) 
     }); 
    </script> 



<div class="panel-body"> 
    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example"> 
    <thead> 
    <tr> 
    <th>POSName</th> 
    <th>HODB</th> 
    </tr> 
    </thead> 

Noch ist es nicht funktioniert. Die JSON-Objekt-Antwort befindet sich im Entwickler-Tool von Chrome, Daten werden jedoch nicht in der Tabelle angezeigt.

Answer 1

So etwas sollte funktionieren:

let data = { 
    "CHD2": { 
     "POSName": "CHANDIGARH INDU. AREA-I", 
     "HODB": "QSR_PHASE-I_CHANDIGARH" 
    }, 
    "D002": { 
     "POSName": "DEHRADUN-ASTLEY HALL", 
     "HODB": "QSR_DEHRADUN_ASTLEY" 
    }, 
    "J002": { 
     "POSName": "VAISHALI NAGAR", 
     "HODB": "QSR_VAISHALI_NAGAR" 
    } 
    }, 
    dataArray = []; 

for (let item in data) { 
    let row = { 
    "Name": item 
    }; 
    for (let element in data[item]) { 
    console.log(data[item][element]); 
    row[element] = data[item][element]; 
    } 
    dataArray.push(row); 
} 
console.log(dataArray); 

Sobald das rows getan sollten Sie Ihre Daten darstellen. JSFiddle here arbeiten.