Skip to content

Multiple Arrays in DataTable

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" }
            ],
        }); 
} 

Answer

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
            ],
        }); 
}