AJAX JSON response from PHP MySQL rows to html table

After lots of banging head and stackoverflow here is how to displaly AJAX JSON response from PHP MySQL to html table for your referenses

RESPONSE.PHP ---- get user query json response from PHP MySQL

<?php include('config.php'); $rno = $_POST["yno"]; //$rno = '215412141'; $mst = mysqli_query($con,'select * from usermst where uno="' . $rno . '"'); $rst = mysqli_fetch_assoc($mst); $ucode = $rst["ucode"]; $result = mysqli_query($con,'select uno,ucode,uref,uname,uphone,uemail from usermst where uref="' . $ucode . '"'); $rows = array(); while($r = mysqli_fetch_assoc($result)){ $rows[] = array('data' => $r); } echo json_encode($rows); ?>

AJAX Response Data Retrival Page

<script> $( function() { var availableTags = [ <?php $ukd = mysqli_query($con,'select uname,uno,ucode from usermst order by uno ASC') or die('usermst retrival error : ' . mysqli_error($con)); while($kref = mysqli_fetch_assoc($ukd)){ ?> "<?php echo $kref['uno'] . ' - ' . $kref['uname']; ?>", <?php } ?> ]; $( "#uref" ).autocomplete({ source: availableTags }); } ); function getRef(){ var xtr = document.getElementById("uref").value; var xref = xtr.split(" - "); $.ajax({ url: 'getref.php', type: 'post', data: {yno:xref[0]}, // crossDomain: true, dataType: 'JSON', success: function(response){ console.log(response); var len = response.length; if(len == null){ for(var i=0; i<len; i++){ var id = response[i].data.uno; var icode = response[i].data.ucode; var name = response[i].data.uname; var tr_str = "<tr>" + "<td align='center'>" + (i+1) + "</td>" + "<td align='center'>" + id + "</td>" + "<td align='center'>" + icode + "</td>" + "<td align='center'>" + name + "</td>" + "</tr>"; $("#records_table tbody").append(tr_str); } } else { $('#records_table tbody').after('<tr><td colspan="4">No Records Found</td></tr>'); } } }); } </script>