jQuery DataTables adding dynamic headers and table row's not showing

Question

I am having an issue with rendering my jQuery DataTable correctly. I am dynamically generating the headers for my table from a CSV Data source. From there I am just adding the corresponding table data from the CSV.

The issue is in where I am calling .row.add([data.Data[i]]); . If I include the [] brackets that surround my data.Data[i] object -- the table is rendered incorrectly. (see picture below)

Vs.

When I simply remove the [] the headers are correct but then the data.Data does not show - when inspecting the DOM. I find a jQuery error of Cannot read property 'nodeName' of undefined .

I have also included a picture from the DOM of the object that is getting passed back.

Question:

Is there something that I am missing in my code (below) that is preventing me from having the correct desired output of formatted table headers with dynamic data? I have also created a fiddle - which has the correct output but for some reason it is not working, please help fiddle

JavaScript Code:

 (function Launch() { //console.log("Inside the GET Call: "); $.get("/Home/CsvPath") .done(function (data) { data = $.parseJSON(data); var csvFilePath = data.FullPath; GetCsvData(csvFilePath); }); }()); function GetCsvData(csvFilePath) { //console.log("Inside the POST Call: "); $.post("/Home/ReadCsv", { csvFilePath: csvFilePath }) .done(function (data) { data = $.parseJSON(data); var formattedHeaders = []; $.each(data.Headers, function(e, f) { formattedHeaders.push({ "sTitle": data.Headers[e]}); }); var csvTable = $("#csvData-table") .DataTable({ "stateSave": false, "bFilter": false, "bInfo": false, "destroy": false, "paging": false, "lengthChange": false, "responsive": true, "columns": formattedHeaders }); csvTable.clear(); csvTable.draw(); console.log(data.Data); console.log(data) // var csvData = data; for (var i = 0; i < data.Headers.length; i++) { csvTable.row.add( data.Data[i] ) } csvTable.draw(); }); }; 

Answer 1

Solved:

The issue was the fact that there was not enough data in my rows depending on the number of headers. Which was causing the error within the DOM - a simple edit and fixing the loop allowed me to achieve the correct result.

(function Launch() {
//console.log("Inside the GET Call: ");

$.get("/Home/CsvPath")
    .done(function (data) {
        data = $.parseJSON(data);
        var csvFilePath = data.FullPath;
        GetCsvData(csvFilePath);
    });
}());


function GetCsvData(csvFilePath) {

//console.log("Inside the POST Call: ");

$.post("/Home/ReadCsv", { csvFilePath: csvFilePath })
    .done(function (data) {
        data = $.parseJSON(data);

        var formattedHeaders = [];
        $.each(data.Headers, function(e, f) {
            formattedHeaders.push({ "sTitle": data.Headers[e]});
        });

        var csvTable = $("#csvData-table")
            .DataTable({
                "stateSave": false,
                "bFilter": false,
                "bInfo": false,
                "destroy": false,
                "paging": false,
                "lengthChange": false,
                "responsive": true,
                "columns": formattedHeaders
            });

        csvTable.clear();
        csvTable.draw();

        csvTable.rows.add(
            data.Data
        );

        csvTable.draw();

    });
};