CODEWITHSUNDEEP
javascriptjqueryhtmljson
Ranjank
Ranjank

Reputation: 133

for loop is not working inside append function

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>'
);

Upvotes: 0

Views: 82

Answers (2)

mplungjan
mplungjan

Reputation: 178421

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);

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25537

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'));

Upvotes: 0

Related Questions