Showing the ajax-data in bootstrap - ajax

Question

I have this code for viewing all the gathered data from database using ajax which is working but only when I use input tags read-only. Is there any way to show data like in Table (which i really want).
The view.blade
<div id="viewInfo" class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" style="color: green;">
<h5 class="modal-title" id=""><strong>Full Details</strong></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="color: white;" >×</span>
</button>
</div>
<div class="modal-body" style="font-size: 10px;" >
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="name2">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email/Username</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="email2">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Address</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="address2">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Phone Number</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="phone_number2">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Household Type</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="type2">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Active Status </label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="active_status2">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Password </label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="password2">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Transactions </label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The Script
$('.view_data').click(function(){
event.preventDefault();
var household_id = $(this).attr("id");
$.ajax({
url:"{{ route('householdInfo') }}",
method:"get",
data:{household_id:household_id},
dataType:"json",
success:function(data){
$('#name2').val(data.firstname);
$('#address2').val(data.address);
$('#phone_number2').val(data.phone_number);
$('#type2').val(data.type);
$('#email2').val(data.email);
$('#active_status2').val(data.active_status);
$('#password2').val(data.password);
$('#viewInfo2').appendTo('body').modal('show');
console.log(data);
}
});
});
I'd like to do it not using input tags in readonly. A very much thank you for anyone who could help me about this.

Answer 1

Make change to your blade file
<table>
<thead>
<tr>
<th>Sr no</th>
<th>Country</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
You just need to change the success function of the ajax
success: function(data) {
$.each(data.results, function(index,val){
$("tbody").append("<tr><td>"index+"</td><td>"+val.country+"</td></tr>");
});
},