I am trying to add data to table cells via an each loop in JQuery. My code for the loop is below.

 $.getJSON(filter, function (data) {
        $.each(data, function (key, val) {
           var entry = $('<tr>').append(
            $.each(val, function (key, val) {      
                $('<td contenteditable="true">').text(val);
            }));

            // var entry = $('<tr>').append(
            //     $('<td contenteditable="true">').text(val.firstName),
            //     $('<td contenteditable="true">').text(val.lastName),
            //     $('<td contenteditable="true">').text(val.address),
            //     $('<td contenteditable="true">').text(val.city),
            //     $('<td contenteditable="true">').text(val.state),
            //     $('<td contenteditable="true">').text(val.zipcode)
            // );
            entry.appendTo(table);

The loop code is not populating the table with the rows. If I run the mented section below the $.each loop instead it populates fine. I can log the value of val in the loop and the data is ing in fine. I can even log to the td Any ideas on why this is not working will be greatly appreciated.

I am trying to add data to table cells via an each loop in JQuery. My code for the loop is below.

 $.getJSON(filter, function (data) {
        $.each(data, function (key, val) {
           var entry = $('<tr>').append(
            $.each(val, function (key, val) {      
                $('<td contenteditable="true">').text(val);
            }));

            // var entry = $('<tr>').append(
            //     $('<td contenteditable="true">').text(val.firstName),
            //     $('<td contenteditable="true">').text(val.lastName),
            //     $('<td contenteditable="true">').text(val.address),
            //     $('<td contenteditable="true">').text(val.city),
            //     $('<td contenteditable="true">').text(val.state),
            //     $('<td contenteditable="true">').text(val.zipcode)
            // );
            entry.appendTo(table);

The loop code is not populating the table with the rows. If I run the mented section below the $.each loop instead it populates fine. I can log the value of val in the loop and the data is ing in fine. I can even log to the td Any ideas on why this is not working will be greatly appreciated.

• javascript
• jquery
• loops
• each

3 Answers 3

The issue is because you cannot call $.each() from within the append() method - at least not in the manner you're attempting to. You need to first append the tr elements, then add the td to that in the inner loop.

Alternatively you can build the HTML in a single string and call append() once, like this:

$.getJSON(filter, function(data) {
  $.each(data, function(key, val) {
    var tds = val.map(function(value) {
      return ' <td contenteditable="true">' + value + '</td>';
    });
    table.append('<tr>' + tds.join('') + '</tr>');
  });
});

Each method just iterates, you want to give back the element and for that you use map instead of each :

$.map(val, function (key, val) {      
    return $('<td contenteditable="true">').text(val);
})

append can accept a function and will use it's return value. You need to map the results within your append and return that result.

$.each(data, function (key, val) {
    var entry = $('<tr>').append(
        return $.map(val, function (key, val) {      
            return $('<td contenteditable="true">').text(val);
        }));
});