Javascript jQuery数据表添加动态列

我在JSON对象中有一个如下所示的JSON对象（“数据源”）“viewClasses”属性有时为空，这里我要做的是，如果“viewClasses”有任何记录，我想向表中添加一个动态列，列标题的名称将是“viewClasses.class”的值，我已经尝试了下面的代码，但它没有按预期工作

下面是以下代码的结果-

这是我想要的结果-

var数据源=[{
“名称”：“PI61890”，
“portfolioName”：“PGIM新兴市场债务本币基金”，
“起始日期”：“2020-10-31T00:00:00”，
“结束日期”：“2020-10-31T00:00:00”，
“处理日期”：“2020-10-31T00:00:00”，
“查看详细信息”：{
“名称”：“管理层”，
“代码”：“管理”，
“类别”：“资产”，
“说明”：“资产说明”，
“视图类”：[{
“类”：“A”，
“金额”：2000.0
},
{
“类别”：“B”，
“金额”：3000.0
}
]
},
}];
var列=[]；
函数AddColumn（）{
$.each（数据源[0].viewDetails.viewClasses[0]，函数（键，值）{
var my_item={}；
my_item.data=键；
my_item.title=键；
column.push（我的_项）；
});
}
$（'#示例'）。数据表({
数据：数据源[0]。viewDetails.viewClasses，
“列”：列，
“分页”：false，
“bInfo”：假
});
您的源数据需要以两种不同的方式进行迭代，以构建DataTables需要的两种不同的动态数组：-列数据和行数据

首先有两列，
A
和
B
。要为这些对象构建阵列，可以使用以下命令：

var dynamicColumns = [];

columnData.forEach(function (columnItem) {
  // extract the column definitions:
  var dynamicColumn = {};
  dynamicColumn['data'] = columnItem['class'];
  dynamicColumn['title'] = 'Heading ' + columnItem['class'];
  dynamicColumns.push(dynamicColumn);
});

[
  {
    "A": 2000,
    "B": 3000
  }
]

我选择不使用jQuery迭代器，因为我希望访问数组中的每个对象

这给了我以下结构：

[
  {
    "data": "A",
    "title": "Heading A"
  },
  {
    "data": "B",
    "title": "Heading B"
  }
]

但是对于表的数据，我只想得到一行数据：

var dynamicRow = {};
  
columnData.forEach(function (columnItem) {
  // extract the data set:
  var field = columnItem['class'];
  var value = columnItem['amount'];
  dynamicRow[field] = value;
});
dynamicRows.push(dynamicRow);

在这里，我总结如下：

var dynamicColumns = [];

columnData.forEach(function (columnItem) {
  // extract the column definitions:
  var dynamicColumn = {};
  dynamicColumn['data'] = columnItem['class'];
  dynamicColumn['title'] = 'Heading ' + columnItem['class'];
  dynamicColumns.push(dynamicColumn);
});

[
  {
    "A": 2000,
    "B": 3000
  }
]

现在我有了数据表初始化所需的结构。因此，总体脚本如下：

<script type="text/javascript">

var dataSource = [{
  "Name": "PI61890",
  "portfolioName": "PGIM Emerging Markets Debt Local Currency Fund",
  "StartDate": "2020-10-31T00:00:00",
  "EndDate": "2020-10-31T00:00:00",
  "processDate": "2020-10-31T00:00:00",
  "viewDetails": {
    "Name": "Management",
    "Code": "MGMT",
    "category": "Asset",
    "description": "Asset Description",
    "viewClasses": [{
        "class": "A",
        "amount": 2000.0
      },
      {
        "class": "B",
        "amount": 3000.0
      }
    ]
  },
}];

var dynamicColumns = [];
var dynamicRows = [];

function buildDynamicData() {

  var columnData = dataSource[0].viewDetails.viewClasses;
  
  var dynamicRow = {};
  
  columnData.forEach(function (columnItem) {
    // extract the column definitions:
    var dynamicColumn = {};
    dynamicColumn['data'] = columnItem['class'];
    dynamicColumn['title'] = 'Heading ' + columnItem['class'];
    dynamicColumns.push(dynamicColumn);
    
    // extract the data set:
    var field = columnItem['class'];
    var value = columnItem['amount'];
    dynamicRow[field] = value;
  });
  dynamicRows.push(dynamicRow);

}

buildDynamicData();

console.log(dynamicColumns);
console.log(dynamicRows);

  $(document).ready(function() {
  
$('#example').DataTable({
  columns: dynamicColumns,
  data: dynamicRows,
  paging: false,
  info: false
});


  } );

</script>


变量数据源=[{
“名称”：“PI61890”，
“portfolioName”：“PGIM新兴市场债务本币基金”，
“起始日期”：“2020-10-31T00:00:00”，
“结束日期”：“2020-10-31T00:00:00”，
“处理日期”：“2020-10-31T00:00:00”，
“查看详细信息”：{
“名称”：“管理层”，
“代码”：“管理”，
“类别”：“资产”，
“说明”：“资产说明”，
“视图类”：[{
“类”：“A”，
“金额”：2000.0
},
{
“类别”：“B”，
“金额”：3000.0
}
]
},
}];
var dynamicColumns=[]；
var dynamicRows=[]；
函数buildDynamicData（）{
var columnData=数据源[0]。viewDetails.viewClasses；
var={}；
columnData.forEach（函数（columnItem）{
//提取列定义：
var dynamicColumn={}；
dynamicColumn['data']=columnItem['class']；
dynamicColumn['title']='Heading'+columnItem['class']；
dynamicColumns.push（dynamicColumn）；
//提取数据集：
变量字段=columnItem['class']；
var值=columnItem['amount']；
dynamicCrow[字段]=值；
});
推（dynamicRow）；
}
buildDynamicData（）；
console.log（dynamicColumns）；
控制台日志（dynamicRows）；
$（文档）.ready（函数（）{
$（'#示例'）。数据表({
列：dynamicColumns，
资料来源：乌鸦，
分页：false，
信息：错误
});
} );

最终结果如下（在我的测试环境中）：