ajax response data is not showing on html table inside modal in Jquery

Question

I have a link when i click on the link opening the modal and calling the ajax method.It is opening the Modal and calling the ajax method and getting the response data fine but not displaying the data which coming from the ajax response on my modal inside table.I tried so many ways but it is not working.Now I fixed the syntax errors Please somebody help me .thanks in Advance.

HTML code

 function Showdata() { $("#showdata").dialog({ autoOpen: false, modal: true, title: 'table', width: '1190', height: '630', buttons: { Cancel: function() { $(this).dialog("close"); } }, }).dialog('open'); return false; } var response=[{ "mtrl_id": "1", "mtrl_name": "Iron Sticks", "mtrl_uom": "150", "mtrl_price": "1700", "mtrl_slno": "iron15", "mtrl_maxstk": "1700", "mtrl_crtstk": "160", "mtrl_stkonorder": "190", "mtrl_insertat": "2018-02-20 15:18:44.000000", "mtrl_updt": "2018-02-22 10:24:59.000000" }, { "mtrl_id": "5", "mtrl_name": "Cement Bags", "mtrl_uom": "1500", "mtrl_price": "6400", "mtrl_slno": "cm165", "mtrl_maxstk": "1400", "mtrl_crtstk": "120", "mtrl_stkonorder": "200", "mtrl_insertat": "2018-02-20 14:48:17.000000", "mtrl_updt": "2018-02-21 18:13:14.000000" }, { "mtrl_id": "9", "mtrl_name": "Beans", "mtrl_uom": "15", "mtrl_price": "161", "mtrl_slno": "sls12", "mtrl_maxstk": "150", "mtrl_crtstk": "120", "mtrl_stkonorder": "116", "mtrl_insertat": "2018-02-21 17:43:01.000000", "mtrl_updt": "2018-02-21 18:22:40.000000" }] $(function(){ $('#showdiv a').on('click',function(){ $.ajax({ data:response, success:function(response) { var dat=response; var tbody=$("#Mytbl tbody"), // var tbody =$("#mtrlform").find('#tablediv #Mytbl tbody'), prop = ["mtrl_name", "mtrl_uom","mtrl_maxstk","mtrl_crtstk"]; $.each(dat, function(i, dat) { var tr = $('<tr>'); $.each(prop, function(i, prop) { $('<td>').html(dat[prop]).appendTo(tr); }); $('<td>').html("<a class='editdata' onclick='OpeneditModal();'' href='"+dat["mtrl_id"]+"'><i class='fa fa-edit fa-2x'></i></a>").appendTo(tr); $('<td>').html("<a class='removedata' href='"+dat["mtrl_id"]+"'><i class='fa fa-remove fa-2x'></i></a>").appendTo(tr); }); } }); }); }); 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id ="showdiv" style="width:20%;float:right;"> <div style="font-size:18px;"><a onclick="Showdata();" href="#">Show Details</a></div> </div> <div id="showdata" style="display:none;"> <div id="tablediv" style="width:100%;margin-top:10px;" max-height="500px;" overflow="auto;"> <table class="table table-striped table-bordered table-fixed" cellspacing="0" style="width:100%;padding-top:20px;" id="Mytbl"> <thead> <tr> <th style="text-align:center;font-size:15px;">Name</th> <th style="text-align:center;font-size:15px;">UOM</th> <th style="text-align:center;font-size:15px;">Maxstock</th> <th style="text-align:center;font-size:15px;">Current Stock</th> <th style="text-align:center;font-size:15px;">Edit</th> <th style="text-align:center;font-size:15px;">Delete</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> 

Answer 1

Check this you have missed tr.appendTo(tbody); and if i have used your ajax then I am getting null value

 function Showdata() { $("#showdata").dialog({ autoOpen: false, modal: true, title: 'table', width: '1190', height: '630', buttons: { Cancel: function() { $(this).dialog("close"); } }, }).dialog('open'); return false; } var response=[{ "mtrl_id": "1", "mtrl_name": "Iron Sticks", "mtrl_uom": "150", "mtrl_price": "1700", "mtrl_slno": "iron15", "mtrl_maxstk": "1700", "mtrl_crtstk": "160", "mtrl_stkonorder": "190", "mtrl_insertat": "2018-02-20 15:18:44.000000", "mtrl_updt": "2018-02-22 10:24:59.000000" }, { "mtrl_id": "5", "mtrl_name": "Cement Bags", "mtrl_uom": "1500", "mtrl_price": "6400", "mtrl_slno": "cm165", "mtrl_maxstk": "1400", "mtrl_crtstk": "120", "mtrl_stkonorder": "200", "mtrl_insertat": "2018-02-20 14:48:17.000000", "mtrl_updt": "2018-02-21 18:13:14.000000" }, { "mtrl_id": "9", "mtrl_name": "Beans", "mtrl_uom": "15", "mtrl_price": "161", "mtrl_slno": "sls12", "mtrl_maxstk": "150", "mtrl_crtstk": "120", "mtrl_stkonorder": "116", "mtrl_insertat": "2018-02-21 17:43:01.000000", "mtrl_updt": "2018-02-21 18:22:40.000000" }] $(function(){ $('#showdiv a').on('click',function(){ var dat=response; var tbody=$("#Mytbl tbody"), // var tbody =$("#mtrlform").find('#tablediv #Mytbl tbody'), prop = ["mtrl_name", "mtrl_uom","mtrl_maxstk","mtrl_crtstk"]; $.each(dat, function(i, dat) { var tr = $('<tr>'); $.each(prop, function(i, prop) { $('<td>').html(dat[prop]).appendTo(tr); tr.appendTo(tbody); }); $('<td>').html("<a class='editdata' onclick='OpeneditModal();'' href='"+dat["mtrl_id"]+"'><i class='fa fa-edit fa-2x'></i></a>").appendTo(tr); $('<td>').html("<a class='removedata' href='"+dat["mtrl_id"]+"'><i class='fa fa-remove fa-2x'></i></a>").appendTo(tr); }); }); }); 

 td{ text-align:center; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id ="showdiv" style="width:20%;float:right;"> <div style="font-size:18px;"><a onclick="Showdata();" href="#">Show Details</a></div> </div> <div id="showdata" style="display:none;"> <div id="tablediv" style="width:100%;margin-top:10px;" max-height="500px;" overflow="auto;"> <table class="table table-striped table-bordered table-fixed" cellspacing="0" border="1" style="width:100%;margin-top:50px;" id="Mytbl"> <thead> <tr> <th style="text-align:center;font-size:15px;">Name</th> <th style="text-align:center;font-size:15px;">UOM</th> <th style="text-align:center;font-size:15px;">Maxstock</th> <th style="text-align:center;font-size:15px;">Current Stock</th> <th style="text-align:center;font-size:15px;">Edit</th> <th style="text-align:center;font-size:15px;">Delete</th> </tr> </thead> <tbody> </tbody> </table> </div> </div>