jQuery DataTable add dynamic columns

Your source data needs to be iterated in two different ways, to build the two different dynamic arrays which DataTables needs: - column data and row data.

Firstly you have two columns, A and B. To build the array for these, you can use the following:

var dynamicColumns = [];

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

I chose not to use the jQuery iterator because I want access to each object in the array.

This gives me the following structure:

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

But for the table's data, I want to end up with only one row of data:

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

Here, I end up with the following:

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

Now I have the structures I need for my DataTable initialization. The overall script therefore is as follows:

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

And the end result looks like this (in my test environment):