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.

Have you run the AJAX call manually to see what data it returns? If so, please add that to the question. And remove [mysql] tag unless it is really relevant. — Rick James
– Rick James, Commented Feb 1, 2017 at 23:57

Trey · Accepted Answer · 2017-02-01 21:16:02Z

6

+50

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.

edited Feb 1, 2017 at 21:16

answered Feb 1, 2017 at 21:06

Trey

5,5404 gold badges25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

JBaldwin Over a year ago

Thank you for this. I will try it out. I also updated my question and added the ajax call I'm using to get the data from the db.

JBaldwin Over a year ago

So I just noticed you didn't change anything to the code. Do I append the td's outside of the second loop. I'm not 100% sure how to do this.

Trey Over a year ago

There isn't a lot of good direction we can give without seeing the actual data, the ajax call doesn't show us what you have to work with in the success handler. But I've updated my answer with my best guess

JBaldwin Over a year ago

Thank you. The data the comes back has 6 columns, county, state name, and some numbers for the other columns data. I tried your code and it works but it only prints out one row with both the county name and state name in each column

JBaldwin Over a year ago

How could I have it print separate rows and then separate out the county and state names to separate columns?

|

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related