c# - Create table in bootbox dialog with ajax call result -

i'm developing application should reported attendance on unique occasions . list of json objects through ajax call .

i create table in bootbox dialogue create new rows each item in result ajax call . each line consist of name , checkbox linked name's id.

but when show boot box , shows object.object , empty box underneath.

what doing wrong?

here code:

$.ajax({     type: 'get',     url: '/lecture/getparticipantstoattend',     datatype: 'json',     data: { id: lectureid },     success: function (participants) {          bootbox.dialog({             backdrop: false,             title: "attendance",             message: '<table class="table-striped form-control" id="tblparticipants"> '                 + $.each(participants, function (i, participant) {                     '<tr> '                         + '<td class="col-lg-11 col-md-11 col-sm-11 col-xs-11"> '                     + '<label> ' + participant.fullname                     + '</label>' + '</td> '                     + '<td class="text-center col-lg-1 col-md-1 col-sm-1 col-xs-1">'                     +                 (participant.attended == true ? '<input type="checkbox" value="' + participant.participantid + '" checked="checked"/>' : '<input type="checkbox" value="' + participant.participantid + '" />')                     + '</td> '                     + '</tr> '             }) + '</table> ',             buttons: {                 success: {                     label: "save",                     classname: "btn-success",                     callback: function () {                      }                 },                 danger: {                     label: "cancel",                     classname: "btn-danger",                     callback: function () {                      }                 }             }         })                 } }) 

i think solution here create string before calling bootbox. try that:

$.ajax({ type: 'get', url: '/lecture/getparticipantstoattend', datatype: 'json', data: { id: lectureid }, success: function (participants) {      var table = '<table class="table-striped form-control" id="tblparticipants"> ';     $.each(participants, function (i, participant) {         var tr = '<tr> ';         tr += '<td class="col-lg-11 col-md-11 col-sm-11 col-xs-11"> ';         tr += '<label> ' + participant.fullname;         tr += '</label>' + '</td> ';         tr += '<td class="text-center col-lg-1 col-md-1 col-sm-1 col-xs-1">';         tr += (participant.attended == true ? '<input type="checkbox" value="' + participant.participantid + '" checked="checked"/>' : '<input type="checkbox" value="' + participant.participantid + '" />');         tr += '</td> ';         tr += '</tr> ';         table += tr;     });     table += "</table>";      bootbox.dialog({         backdrop: false,         title: "attendance",         message: table,         buttons: {             success: {                 label: "save",                 classname: "btn-success",                 callback: function () {                  }             },             danger: {                 label: "cancel",                 classname: "btn-danger",                 callback: function () {                  }             }         }     });  }});