Dynamically adding Table data and table rows to HTML, TD not displaying in HTML

Question

I am stuck. I am retrieving data from parse.com and trying to dynamically add them to their respective fields. What am I messing up on? I can console.log the data, so my get request is working. Thank you.

var parseData = function() {

    var orderform = Parse.Object.extend("OrderForm");
    var query = new Parse.Query(orderform);
    query.find({
        success: function (results) {

            var tableRow = $('<tr />', {class: 'tableRows'});
          var restaurantListP = [];
            var tdId = [];
            var tdEmail = [];
            var tdMenuItems = [];
            var tdNotes = [];
            var tdPhoneNumber = [];
            var table = $('#orderTable > tbody');

            function newRow($table, cols){
                $row = $('<tr/>');
                for (var i = 0; i < cols.length; i++) {
                    $col = $('<td/>');
                    $col.append(cols[i]);
                    $row.append($col[i]);
                }
                table.append($row);
            }

            results.forEach(function (r, i) {
               // tdId = $('<td />', { "id": r.id });
                tdEmail = $('<td />', {email_address: r.attributes.email_address });
                tdMenuItems = $('<td />', {menu_items: r.attributes.menu_items });
                tdNotes = $('<td />', {notes: r.attributes.notes});
                tdPhoneNumber = $('<td />', {phone_number: r.attributes.phone_number});

                newRow(table,[tdId,tdEmail,tdMenuItems,tdNotes,tdPhoneNumber]);
               // $('#orderTable > tbody').append(tableRow).append(restaurantListP[0]);

                console.log(tdMenuItems);
                console.log(tdEmail);
            });

http://jsfiddle.net/DaveDH2/tb6d7w81/

in jsfiddle you can include ressources on the left "external ressources" copy paste the link an click on the "+" icon — caramba
– caramba, Commented Aug 31, 2014 at 6:46
In your table tbody has id=orderTable, & you are trying to get var table = $('#orderTable > tbody'); which won't give anything, say this var table = $('#orderTable'); & let me know. — Mritunjay
– Mritunjay, Commented Aug 31, 2014 at 6:56

Regent · Accepted Answer · 2014-08-31 07:01:24Z

2

There are two major errors:

id="orderTable" is set for <tbody>, not to <table>, so $('#orderTable > tbody') finds nothing. You should either move id="orderTable" to <table>, or rewrite selector to var table = $('#orderTable').

newRow function works incorrectly: it wraps already created <td> with another <td>, making <tr> html code incorrect. This function should be rewritten in something like this:

function newRow($table, cols)
{
    var $row = $('<tr/>');
    for (var i = 0; i < cols.length; i++)
    {
        $row.append(cols[i]);
    }
    $table.append($row);
}

Updated fiddle.

answered Aug 31, 2014 at 7:01

Regent

5,1743 gold badges23 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Dynamically adding Table data and table rows to HTML, TD not displaying in HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related