Jquery 将数据填充到数据表的列中

我从服务器获得json对象响应，但无法将数据呈现为列。 谢谢你的帮助

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

$（文档）.ready（函数（）{
log（'初始化表…'）；
var=[]；
$（'#数据表示例'）。数据表({
回答：是的，
处理：对，
服务器端：是的，
数据：aaData，
阿贾克斯：{
网址：'http://localhost:81/reporting/outletList.php',
类型：'POST'，
数据类型：'json'，
dataSrc:“”，
错误：函数（错误抛出）{
警报（错误抛出）；
警报（“AJAX有错误！”）；
},
“成功”：功能（数据）{
控制台日志（数据）；
aaData.push([
数据['CHD2'].POSName，
数据['CHD2'].HODB
]);
aaData.push([
数据['D002'].POSName，
数据['D002'].HODB
]);
data=aaData；
控制台日志（数据）；
}},
/*栏目：[
{data:“POSName”}，
{数据：“HODB”}
],*/
“语言”：{
“零记录”：“没有要显示的记录”
}
})
});
波斯纳
HODB

---

但它仍然不起作用。Chrome的开发者工具中有JSON对象响应，但表中没有填充数据。

类似的东西应该可以工作：

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

---

完成后，

行

应表示您的数据。正在使用JSFIDLE。

您正在使代码变得非常复杂，您可以轻松地处理它。。。。请在要更新json响应的位置写入html或DIV或SPAN类名。不清楚要在何处显示（呈现）数据。您可能希望使用javascript（使用检索到的数据）创建新的html表标记，并在页面上的某个位置追加。Datatable id为#dataTables exampleHi，感谢您的回复。我正在获取包含3个字段的dataArray，但该表未填充。它显示“处理”。你能检查一下我的html代码吗。