for loop is not working inside append function

Question

I want to wrap entire content into single div, it needed for loop inside append function. after wrapping around div in javascript, it's not displaying anything.

here is my code;

$('#postjson').append(
  '<div>' + '<div id="' + data[0].id + '">' + '<p>' + '<div id="namediv">' + data[0].FirstName + '&nbsp;' + data[0].MiddleName + '&nbsp;' + data[0].LastName + '<br/>' + '<span id="locationspan">' + 'xyz' + data[0].Location + '</span>' + '</div>' + '<br/>'
  //+'Email:'+data[0].Email+'<br/>'
  //+'Mobile:'+data[0].Mobile+'<br/>'
  + '</p>' + '</div>'
  // displaying book details
  +
  for (var i = 1; i < data.length; i++) {
    tr = $('<tr/>');
    tr.append("<td>" + data[i].BookNo + "</td>");
    tr.append("<td>" + data[i].BookTitle + "</td>");
    tr.append("<td>" + data[i].BookGenre + "</td>");
    tr.append("<td>" + data[i].BookWriter + "</td>");
    tr.append("<td>" + data[i].BookDescription + "</td>");
    $('#displaytable').append(tr);
  } + '</div>'
);

Why use TR in a div? Where is the table? Also } + '</div>' is not valid JS. Your code is not recommendable and hard to maintain — mplungjan
– mplungjan, Commented May 24, 2016 at 13:10
table is outside the script , i am just adding rows to the table here. then please give some alternative solution — Ranjank
– Ranjank, Commented May 24, 2016 at 13:11
if you add an element distinct of a TR to the table, here is a DIV with tr inside, wont work, only tr elements will be recognized — cralfaro
– cralfaro, Commented May 24, 2016 at 13:13
I assume he wants to append displaytable to inside the div appended to postjson - it is horrible to read — mplungjan
– mplungjan, Commented May 24, 2016 at 13:14

mplungjan · Accepted Answer · 2016-05-24 13:22:28Z

1

Perhaps you meant

var $table = $('<table>', {"id:":"displaytable"});
for (var i = 1; i < data.length; i++) {
    tr = $('<tr/>');
    tr.append("<td/>",{"text":data[i].BookNo});
    tr.append("<td/>",{"text":data[i].BookTitle});
    tr.append("<td/>",{"text":data[i].BookGenre});
    tr.append("<td/>",{"text":data[i].BookWriter});
    tr.append("<td/>",{"text":data[i].BookDescription});
    $table.append(tr);
}

$('#postjson')
  .append($('<div />',{"id":"tableDiv"}))
  .append($('<div />',{"id":data[0].id}).append($('<div />',{"id":"namediv"}).html(data[0].FirstName + '&nbsp;' + data[0].MiddleName + '&nbsp;' + data[0].LastName + 
  .append($table);

answered May 24, 2016 at 13:22

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

Comments

Anoop Joshi P · Accepted Answer · 2016-05-24 13:11:33Z

Put the loop outside of the append function and finally append the table to the 'container' element, which is specified in the html string

$('#postjson').append(
  '<div id="container">' + '<div id="' + data[0].id + '">' + '<p>' + '<div id="namediv">' + data[0].FirstName + '&nbsp;' + data[0].MiddleName + '&nbsp;' + data[0].LastName + '<br/>' + '<span id="locationspan">' + 'xyz' + data[0].Location + '</span>' + '</div>' + '<br/>' + '</p>' + '</div>')

for (var i = 1; i < data.length; i++) {
  tr = $('<tr/>');
  tr.append("<td>" + data[i].BookNo + "</td>");
  tr.append("<td>" + data[i].BookTitle + "</td>");
  tr.append("<td>" + data[i].BookGenre + "</td>");
  tr.append("<td>" + data[i].BookWriter + "</td>");
  tr.append("<td>" + data[i].BookDescription + "</td>");
  $('#displaytable').append(tr);
}
$("#container").append($('#displaytable'));

Collectives™ on Stack Overflow

for loop is not working inside append function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related