jQuery each loop inside of dynamic dom element

Question

I am generating a dom element <div> using the code below:

jQuery

$('<div/>', {
    'id': 'myid',
    'html': '<table class="table">'
    + '<tr><th>Heading</th><th>Heading</th><th>Heading</th></tr>'

    +'</table>'
}).appendTo($body);

Everything works great. I would like to loop through my data to create the actual table rows, but I'm getting actual output (which makes sense I suppose). Just not sure how to not do that.

For example:

jQuery

$('<div/>', {
    'id': 'myid',
    'html': '<table class="table">'
    + '<tr><th>Heading</th><th>Heading</th><th>Heading</th></tr>' +
        $.each(data.thing, function(i, val){
         '<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
        });                                      
    +'</table>'
}).appendTo($body);

But, I am getting this for the result:

HTML

[object Object],[object Object],[object Object],[object Object],[object Object],[object    
Object],[object Object],[object Object]

Heading Heading Heading

Paul Roub · Accepted Answer · 2014-08-08 21:51:00Z

2

$.each() returns the object (data.thing, here) that it acts on. You're seeing the stringified version of that.

You can't really loop as part of a data definition. Better to do so afterwards:

var table = $('<table class="table">' +
                 '<tr><th>Heading</th><th>Heading</th><th>Heading</th></tr>' +
              '</table>');

$.each(data.thing, function(i, val){
  table.append( '<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>' );
});

$('<div>').
  attr('id', 'myid').
  append(table).
  appendTo($body);

Example: http://codepen.io/paulroub/pen/dvnKE

answered Aug 8, 2014 at 21:51

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

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

2 Comments

Sushanth -- Over a year ago

+1 .. Not tying to be nit picky . But I feel appending row to the table on each iteration might hit processing speed as the no of rows keep increasing. instead prefer store in a string and append it after the loop.

Paul Roub Over a year ago

That would depend heavily on the number of rows, and could in fact be problematic in terms of memory usage. Something I'd want to measure before worrying either way.

Barmar · Accepted Answer · 2014-08-08 22:12:11Z

1

You can use $.map() to iterate, and then join() to combine the results.

$('<div/>', {
    'id': 'myid',
    'html': '<table class="table">'
    + '<tr><th>Heading</th><th>Heading</th><th>Heading</th></tr>' +
        $.map(data.thing, function(i, val){
          return '<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>';
        }).join('');                                      
    +'</table>'
}).appendTo($body);

Note that the iteration function has to return the string -- just writing the string as a statement doesn't return it.

answered Aug 8, 2014 at 22:12

Barmar

789k57 gold badges554 silver badges669 bronze badges

1 Comment

Damon Over a year ago

This works fantastic. I'll do some testing to check speed if/when things get heavy-duty. But for now, I think the most I'll have is 8 objects to loop over so this should work great. Thank you to everyone for your suggestions!

Collectives™ on Stack Overflow

jQuery each loop inside of dynamic dom element

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related