How to add different columns to a dynamic table from database with javascript

Question

I have a function building a dynamic table. I'm having trouble figuring out how to set each column to a different data set from the database. Right now it just shows the same value in each column.

A little background. I'm building a table with 6 columns and lots of rows (all depends how much data the database has). Right now it's only showing one column in all of the 6 columns, so they repeat.

How can I set each column to a different value for the 6 columns?

    function addTable() {
        var len = errorTableData.length;
        var myTableDiv = document.getElementById("myDynamicTable");
        var table = document.createElement('TABLE');
        table.border='1';
        table.id = "dataTable";
        var tableBody = document.createElement('TBODY');
        table.appendChild(tableBody);

        for (var i=0; i<len; i++){
            var tr = document.createElement('TR');
            tr.className = "rowEditData";
            tableBody.appendChild(tr);

            for (var j=0; j<6; j++){
                var countyName = errorTableData['CountyName'][i];
                var stateName = errorTableData['StateName'][i];
                var td = document.createElement('TD');
                td.className = "mdl-data-table__cell--non-numeric";
                td.appendChild(document.createTextNode(countyName));
                td.appendChild(document.createTextNode(stateName));
                tr.appendChild(td);
            }
        }
        myTableDiv.appendChild(table);
    }

Here is the ajax call:

        function triggerDataTable(index) {
        // Make AJAX requests for model systems
        $.ajax({
            type: "POST",
            url: "qry/getAllData.php",
            async: true,
            dataType: "html",
            data: {ErrorOptions: control.settings.errorOptions},
            success: function (result) {
                //console.warn(result);
                errorData = JSON.parse(result);
                //loop through data
                var len = errorData.length;
                for(i=0; i<len; i++) {
                    if ('VersionKey' in errorData[i]) {
                        vKey = (errorData[i]['VersionKey']);
                    } else if ('ErrorCode' in errorData[i]) {
                        var errorCode = (errorData[i]['ErrorCode']);
                    } else if ('SourceKey' in errorData[i]) {
                        var sourceKey = (errorData[i]['SourceKey']);
                    } else { //data here
                        errorTableData = errorData[i];
                    }
                }
                addTable();
            }
        });
    }

The errorData is the data from the database. As you can see I've tried to add 2 variables but when I do that it just puts both of them in the same box and repeats throughout the whole table.

Answer 1

It looks like you are printing the exact same data 6 times for each row. You create a td element, then add country and state names to it, but the variable you are using for the index on your data set is coming from your outer loop, so on the inner loop it never changes, and you are literally grabbing the same value every time:

function addTable() {
    var len = errorTableData.length;
    var myTableDiv = document.getElementById("myDynamicTable");
    var table = document.createElement('TABLE');
    table.border='1';
    table.id = "dataTable";
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);

    for (var i=0; i<len; i++){

        // You set i here, presumably to get each row in your dataset

        var tr = document.createElement('TR');
        tr.className = "rowEditData";
        tableBody.appendChild(tr);

        for (var j=0; j<6; j++){
            var countyName = errorTableData['CountyName'][i];
            var stateName = errorTableData['StateName'][i];

            // Above, you are using i, not j

            var td = document.createElement('TD');
            td.className = "mdl-data-table__cell--non-numeric";
            td.appendChild(document.createTextNode(countyName));
            td.appendChild(document.createTextNode(stateName));
            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
}

It would be easier to help if you could post some json with the data you are getting from the DB

Based on the edit on your post and looking at the success callback, I think you have small problem that can be easily fixed:

First, initialize an empty array for errorTableData

success: function (result) {
    errorTableData = [];

In your if/else block:

} else { //data here
    errorTableData = errorData[i];
}

Should be:

} else { //data here
    errorTableData[i] = errorData[i];
}

Then in your inner loop:

var countyName = errorTableData['CountyName'][i];
var stateName = errorTableData['StateName'][i];

Becomes:

var countyName = errorTableData[i]['CountyName'][j];
var stateName = errorTableData[i]['StateName'][j];

This is just a guess because I can't see the actual data.