So I am working on a project and am having trouble trying to use multiple arrays of data in a data table.
The issue I am running into is my initial set of data comes from a sharepoint list call(the calculations variable).
I then use values in that array to run some calculations and put those into their own array(formulatedNumbers).
I have my DataTable filling the first 6 columns with data fine(with the calculations array), the issue is getting the second array(formulatedNumbers) into the 7th column.
My javascript buiding the datatable is below
TL;DR After I use the first array to fill in columns 1-6, I want to use another array to fill in column 7.
function displayCalculations() {
$("#table_id").dataTable().fnDestroy();
var calculations = getRateData();
var formulatedNumbers = [];
for(i=0; i<calculations.length; i++) {
formulatedNumbers.push(calculations[i].annum * calculations[i].dailyDecimal * 1000);
}
console.log(formulatedNumbers);
$('#table_id').DataTable(
{
data: calculations,
"columns":
[
{ "data": "startDate" },
{ "data": "endDate" },
{ "data": "dayTotal" },
{ "data": "annum" },
{ "data": "dailyRate" },
{ "data": "dailyDecimal" }
],
});
}
Don’t create new array for the calculated values but add them to your other data
calculations = calculations.map(calculation =>
{
return calculation.push(calculation.annum * calculation.dailyDecimal * 1000);
}
I suggest just adding the new attribute to each item in calculations.
function displayCalculations() {
$("#table_id").dataTable().fnDestroy();
var calculations = getRateData();
calculations.forEach(item =>
item.newField = item.annum * item.dailyDecimal * 1000);
console.log(calculations);
$('#table_id').DataTable(
{
data: calculations,
"columns":
[
{ "data": "startDate" },
{ "data": "endDate" },
{ "data": "dayTotal" },
{ "data": "annum" },
{ "data": "dailyRate" },
{ "data": "dailyDecimal" },
{ "data": "newField" } // + ADDED
],
});
}