I have a payment table where users can see all the transactions. On that table, there is a view button for each row. When the user clicks the view button, a modal will appear. Now the problem is, why I can't display the JSON data in a table inside the modal? Also, how can I display loop the payments? Thanks!
This is my JSON data.
Table: This is the table where I want to display the data.
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th colspan="3">Date</th>
<td id="sales_date"></td>
</tr>
<tr>
<th>PO Number</th>
<td id="sales_po"></td>
<th>SO Number</th>
<td id="sales_so"></td>
</tr>
<tr>
<th>DR Number</th>
<td id="sales_dr"></td>
<th>SI Number</th>
<td id="sales_si"></td>
</tr>
</table>
<hr>
<table class="table table-bordered">
<tr>
<th>Particulars</th>
<td id="sales_particulars"></td>
<th>Media</th>
<td id="sales_media"></td>
</tr>
</table>
</div>
<hr>
<h6 class="font-weight-semibold">Payment Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Amount Paid</th>
<th>Remarks</th>
</tr>
<tr>
<td id="payment_date"></td>
<td id="payment_amount"></td>
<td id="payment_remarks"></td>
</tr>
</thead>
</table>
</div>
<hr>
<table>
<tr>
<th>Total Fees: </th>
<td id="sales_net_amount"></td>
</tr>
<tr>
<th>Total Paid: </th>
<td id="total_paid"></td>
</tr>
<tr>
<th>Balance: </th>
<td id="total_balance"></td>
</tr>
</table>
This what I've tried:
function view_payment_detail(sales_id) {
var modal = $('#payment-details-modal');
$.ajax({
type: 'POST',
url: url + 'GetPaymentInfoById',
data: { payment_info_id : sales_id },
dataType: 'json',
success: function (data) {
console.log(data);
modal.modal('show');
modal.find($('#sales_date')).html(data.sales_date);
modal.find($('#sales_po')).html(data.sales_po);
modal.find($('#sales_so')).html(data.sales_so);
modal.find($('#sales_dr')).html(data.sales_dr);
modal.find($('#sales_si')).html(data.sales_si);
modal.find($('#sales_particulars')).html(data.sales_particulars);
modal.find($('#sales_media')).html(data.sales_media);
}
});
}
JSON:
{
"sales": [
{
"sales_id": "3",
"sales_date": "2021-01-12 01:26:33",
"sales_po": "100549",
"sales_so": "1234",
"sales_dr": "5768",
"sales_si": "1794",
"sales_particulars": "Authorized Personnel Only",
"sales_media": "Sticker on Sintra",
"sales_net_amount": "8601.60",
"sales_balance": "4601.60"
}
],
"0": {
"payments": {
"payment_id": "3",
"payment_amount": "1000.00",
"payment_date": "2021-01-15",
"payment_remarks": ""
}
},
"1": {
"payments": {
"payment_id": "4",
"payment_amount": "1000.00",
"payment_date": "2021-01-18",
"payment_remarks": ""
}
},
"2": {
"payments": {
"payment_id": "5",
"payment_amount": "2000.00",
"payment_date": "2021-01-29",
"payment_remarks": ""
}
}
}
Related
I'm new in angular 2+. I have created a table in angular web api. I need to do it like this - when I press the button (icon) expand the table with the data from my web api.
I did it that way but it's not working. Could someone help me with a solution?
app.component.html
<div class="card-body">
<table datatable class="table table-striped table-bordered hover" [dtOptions]="dtOptions" style="width:100%">
<thead>
<tr>
<th width="2%" class="text-center"></th>
<th width="8%" class="text-center">Name</th>
<th width="8%" class="text-center">Price</th>
</tr>
</thead>
<tbody>
<tr *ngIf="empty">
<td colspan="8" class="text-center" translate>shared.table.not-found</td>
</tr>
<tr *ngFor="let product of products; index as i" (click)="onSelectLine(i)"
[ngClass]="{'tr-selected': selectedIndex === i}">
<td class="text-left">
<a type="button" (click)="onProductComponent(product)">
<i class="fa fa-chevron-right"></i>
</a>
</td>
<td class="text-left">{{product.name}}</td>
<td class="text-left">{{product.price}}</td>
</tr>
<thead>
<tr>
<td colspan="12" >
<div *ngIf="isShown" class="row container-fluid" id="divshow" >
<td class="text-left">{{product.name}}</td>
<td class="text-left">{{product.price}}</td>
</div>
</td>
</tr>
</thead>
</tbody>
</table>
</div>
</div>
app.component.ts
isShown = false;
onProductComponent(product: Product) {
this.isShown = ! this.isShown;
this._product = product;
this.productComponentService.getProduct(this._product.id)
.subscribe(element => {
});
}
It would be like this
You can add isShown property to every product. And change only that value.
If you want to have multiple rows opened than just remove the this.products.map() part from onProductComponent
public products = [
{ name: "Product 1", price: 101, isShown: false },
{ name: "Product 2", price: 102, isShown: false },
{ name: "Product 2", price: 103, isShown: false },
{ name: "Product 3", price: 104, isShown: false },
{ name: "Product 5", price: 105, isShown: false }
];
onProductComponent(product) {
this.products.map(p => {
if (product !== p) {
p.isShown = false;
}
});
product.isShown = !product.isShown;
}
This will lead to change in HTML because you can move the hidden section inside of the loop. Because you don't need to save product.
<div class="card-body">
<table datatable class="table table-striped table-bordered hover" style="width:100%">
<thead>
<tr>
<th width="2%" class="text-center"></th>
<th width="8%" class="text-center">Name</th>
<th width="8%" class="text-center">Price</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let product of products; index as i">
<tr>
<td class="text-left">
<a type="button" (click)="onProductComponent(product)">
<i class="fa fa-chevron-right"></i>
Open
</a>
</td>
<td class="text-left">{{product.name}}</td>
<td class="text-left">{{product.price}}</td>
</tr>
<thead>
<tr>
<td colspan="12">
<div *ngIf="product.isShown" class="row container-fluid" id="divshow">
<span class="text-left">{{product.name}}</span>
<span class="text-left">{{product.price}}</span>
</div>
</td>
</tr>
</thead>
</ng-container>
</tbody>
</table>
</div>
You can check a working example here
I'm trying to add entire row data of a table to my array of object whenever someone click on anchor tag named view/edit. I wrote some logic but I guess I'm missing something.
index.html file
<table class="table">
<thead>
<tr>
<th scope="col">User Name</th>
<th scope="col">Order No</th>
<th scope="col">Order Date</th>
<th scope="col">Status</th>
<th scope="col">Total Amount</th>
<th scope="col">Total Qty</th>
<th scope="col">Total Products</th>
<th scope="col">View/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td id="user-name">Alice</td>
<td id="order-no">8536</td>
<td id="order-date">13/07/2020</td>
<td id="status" >Pending</td>
<td id="total-amount" >1800</td>
<td id="total-qty" >3</td>
<td id="total-products" >3</td>
<td>
<a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
</td>
</tr>
<tr>
<td id="user-name">Michael</td>
<td id="order-no">4354</td>
<td id="order-date">12/07/2020</td>
<td id="status" >Approved</td>
<td id="total-amount" >1500</td>
<td id="total-qty" >2</td>
<td id="total-products" >2</td>
<td>
<a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
</td>
</tr>
</tbody>
</table>
app.js file
let usersData = []; // array to store user table objects
$('#view-data').click(function(){
var row = $(this).closest("tr");
// userData object to store data from a table complete row
var userData = {
"order_no": row.find('#order-no').text(),
"order_date": row.find('#order-date').text(),
"totalproducts": row.find('#total-products').text(),
"total_amount": row.find('#total-amount').text(),
"total_qty": row.find('#total-qty').text(),
"status": row.find('#status').text(),
"user_name": row.find('#user-name').text(),
}
usersData.push(userData)
console.log(usersData)
})
Note: I should use button instead a tag but I'm using anchor tag because it'll open another tab in future for same data manipulation.
Selector need to change to class (view-data) instead of id
let usersData = []; // array to store user table objects
$('.view-data').click(function(ev){
ev.preventDefault();
ev.stopPropagation();
var row = $(ev.currentTarget).closest("tr");
// userData object to store data from a table complete row
var userData = {
"order_no": row.find('#order-no').text(),
"order_date": row.find('#order-date').text(),
"totalproducts": row.find('#total-products').text(),
"total_amount": row.find('#total-amount').text(),
"total_qty": row.find('#total-qty').text(),
"status": row.find('#status').text(),
"user_name": row.find('#user-name').text(),
}
usersData.push(userData)
console.log(userData)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">User Name</th>
<th scope="col">Order No</th>
<th scope="col">Order Date</th>
<th scope="col">Status</th>
<th scope="col">Total Amount</th>
<th scope="col">Total Qty</th>
<th scope="col">Total Products</th>
<th scope="col">View/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td id="user-name">Alice</td>
<td id="order-no">8536</td>
<td id="order-date">13/07/2020</td>
<td id="status" >Pending</td>
<td id="total-amount" >1800</td>
<td id="total-qty" >3</td>
<td id="total-products" >3</td>
<td>
<a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
</td>
</tr>
<tr>
<td id="user-name">Michael</td>
<td id="order-no">4354</td>
<td id="order-date">12/07/2020</td>
<td id="status" >Approved</td>
<td id="total-amount" >1500</td>
<td id="total-qty" >2</td>
<td id="total-products" >2</td>
<td>
<a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
</td>
</tr>
</tbody>
</table>
I have a payment table that contains details of payment and each table row has a view button. My problem is when the modal is open you will see the first table row is blank.
Blank table row:
Second, when I close the modal and open the modal again it will look like this:
Another thing I've seen is when I open another payment details it will look like this. As you can see the three data payments are for the previous opened modal.
The snippet:
var data = {
"sales": [
{
"sales_id": "3",
"sales_date": "2021-01-12 01:26:33",
"sales_po": "100549",
"sales_so": "1234",
"sales_dr": "5768",
"sales_si": "1794",
"sales_particulars": "Authorized Personnel Only",
"sales_media": "Sticker on Sintra",
"sales_net_amount": "8601.60",
"sales_balance": "4601.60"
}
],
"payments": [
{
"payment_id": "3",
"payment_amount": "1000.00",
"payment_date": "2021-01-15",
"payment_remarks": ""
},
{
"payment_id": "4",
"payment_amount": "1000.00",
"payment_date": "2021-01-18",
"payment_remarks": ""
},
{
"payment_id": "5",
"payment_amount": "2000.00",
"payment_date": "2021-01-29",
"payment_remarks": ""
}
]
};
var modal = $('#payment-details-modal');
console.log(data);
modal.modal('show');
modal.find($('#sales_date')).html(data.sales[0].sales_date);
modal.find($('#sales_po')).html(data.sales[0].sales_po);
modal.find($('#sales_so')).html(data.sales[0].sales_so);
modal.find($('#sales_dr')).html(data.sales[0].sales_dr);
modal.find($('#sales_si')).html(data.sales[0].sales_si);
modal.find($('#sales_particulars')).html(data.sales[0].sales_particulars);
modal.find($('#sales_media')).html(data.sales[0].sales_media);
$.each(data.payments, function (i, payment) {
var x = $('#tbbody tbody tr:first').clone().appendTo('#tbbody tbody');
x.find('td').eq(0).text(data.payments[i].payment_date);
x.find('td').eq(1).text(data.payments[i].payment_amount);
x.find('td').eq(2).text(data.payments[i].payment_remarks);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<div id="payment-details-modal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-green-600">
<h5 class="modal-title" id="modal-title"><i class="icon-cash3 mr-2"></i> PAYMENT DETAILS</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="payment_info_id" name="payment_info_id" class="form-control">
<h6 class="font-weight-semibold">Sales Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th colspan="3">Date</th>
<td id="sales_date"></td>
</tr>
<tr>
<th>PO Number</th>
<td id="sales_po"></td>
<th>SO Number</th>
<td id="sales_so"></td>
</tr>
<tr>
<th>DR Number</th>
<td id="sales_dr"></td>
<th>SI Number</th>
<td id="sales_si"></td>
</tr>
</table>
<hr>
<table class="table table-bordered">
<tr>
<th>Particulars</th>
<td id="sales_particulars"></td>
<th>Media</th>
<td id="sales_media"></td>
</tr>
</table>
</div>
<hr>
<h6 class="font-weight-semibold">Payment Details</h6>
<div class="table-responsive">
<table class="table table-bordered" id="tbbody">
<thead>
<tr>
<th>Date</th>
<th>Amount Paid</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<hr>
<table>
<tr>
<th>Total Fees:</th>
<td id="sales_net_amount"></td>
</tr>
<tr>
<th>Total Paid:</th>
<td id="total_paid"></td>
</tr>
<tr>
<th>Balance:</th>
<td id="total_balance"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-green-600" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Amount Paid</th>
<th>Remarks</th>
</tr>
<tr>
<td id="payment_date"></td>
<td id="payment_amount"></td>
<td id="payment_remarks"></td>
</tr>
</thead>
</table>
</div>
This what I've tried:
function view_payment_detail(sales_id) {
var modal = $('#payment-details-modal');
$.ajax({
type: 'POST',
url: url + 'GetPaymentInfoById',
data: { payment_info_id : sales_id },
dataType: 'json',
success: function (data) {
modal.modal('show');
modal.find($('#sales_date')).html(data.sales[0].sales_date);
modal.find($('#sales_po')).html(data.sales[0].sales_po);
modal.find($('#sales_so')).html(data.sales[0].sales_so);
modal.find($('#sales_dr')).html(data.sales[0].sales_dr);
modal.find($('#sales_si')).html(data.sales[0].sales_si);
modal.find($('#sales_particulars')).html(data.sales[0].sales_particulars);
modal.find($('#sales_media')).html(data.sales[0].sales_media);
$.each(data.payments, function (i, payment) {
var x = $('#tbbody tbody tr:first').clone().appendTo('#tbbody tbody');
x.find('td').eq(0).text(data.payments[i].payment_date);
x.find('td').eq(1).text(data.payments[i].payment_amount);
x.find('td').eq(2).text(data.payments[i].payment_remarks);
});
modal.find($('#sales_net_amount')).html('₱ ' + data.sales[0].sales_net_amount);
//modal.find($('#total_paid')).html('₱ ' + total_amount);
modal.find($('#total_balance')).html('₱ ' + data.sales[0].sales_balance);
}
});
}
Your tbody have one tr which you are using for cloning so make that display:none and when you clone that tr remove that display:none .Also, to empty tbody expect the first tr you can use $('#tbbody tbody tr:not(:first-child)').remove();.
Demo Code :
var data = {
"sales": [{
"sales_id": "3",
"sales_date": "2021-01-12 01:26:33",
"sales_po": "100549",
"sales_so": "1234",
"sales_dr": "5768",
"sales_si": "1794",
"sales_particulars": "Authorized Personnel Only",
"sales_media": "Sticker on Sintra",
"sales_net_amount": "8601.60",
"sales_balance": "4601.60"
}],
"payments": [{
"payment_id": "3",
"payment_amount": "1000.00",
"payment_date": "2021-01-15",
"payment_remarks": ""
},
{
"payment_id": "4",
"payment_amount": "1000.00",
"payment_date": "2021-01-18",
"payment_remarks": ""
},
{
"payment_id": "5",
"payment_amount": "2000.00",
"payment_date": "2021-01-29",
"payment_remarks": ""
}
]
};
//when modal show ..
$(document).on("shown.bs.modal", "#payment-details-modal", function() {
var modal = $('#payment-details-modal');
modal.modal('show');
modal.find($('#sales_date')).html(data.sales[0].sales_date);
modal.find($('#sales_po')).html(data.sales[0].sales_po);
modal.find($('#sales_so')).html(data.sales[0].sales_so);
modal.find($('#sales_dr')).html(data.sales[0].sales_dr);
modal.find($('#sales_si')).html(data.sales[0].sales_si);
modal.find($('#sales_particulars')).html(data.sales[0].sales_particulars);
modal.find($('#sales_media')).html(data.sales[0].sales_media);
$('#tbbody tbody tr:not(:first-child)').remove(); //remove all trs except first
//if payements key is there get length or else 0
var length = (data.payments != undefined) ? data.payments.length : 0
console.log("---"+length)
if(length > 0 ){
$.each(data.payments, function(i, payment) {
var x = $('#tbbody tbody tr:first').clone().appendTo('#tbbody tbody');
x.attr('style', '') //after clone remove style(display:none)
x.find('td').eq(0).text(data.payments[i].payment_date);
x.find('td').eq(1).text(data.payments[i].payment_amount);
x.find('td').eq(2).text(data.payments[i].payment_remarks);
});
}else{
//else part
$('#tbbody tbody').append("<tr><td>No Result Found</td></tr>")
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#payment-details-modal">Open Modal</button>
<div id="payment-details-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-green-600">
<h5 class="modal-title" id="modal-title"><i class="icon-cash3 mr-2"></i> PAYMENT DETAILS</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="payment_info_id" name="payment_info_id" class="form-control">
<h6 class="font-weight-semibold">Sales Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th colspan="3">Date</th>
<td id="sales_date"></td>
</tr>
<tr>
<th>PO Number</th>
<td id="sales_po"></td>
<th>SO Number</th>
<td id="sales_so"></td>
</tr>
<tr>
<th>DR Number</th>
<td id="sales_dr"></td>
<th>SI Number</th>
<td id="sales_si"></td>
</tr>
</table>
<hr>
<table class="table table-bordered">
<tr>
<th>Particulars</th>
<td id="sales_particulars"></td>
<th>Media</th>
<td id="sales_media"></td>
</tr>
</table>
</div>
<hr>
<h6 class="font-weight-semibold">Payment Details</h6>
<div class="table-responsive">
<table class="table table-bordered" id="tbbody">
<thead>
<tr>
<th>Date</th>
<th>Amount Paid</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<!--added display none-->
<tr style="display:none">
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<hr>
<table>
<tr>
<th>Total Fees:</th>
<td id="sales_net_amount"></td>
</tr>
<tr>
<th>Total Paid:</th>
<td id="total_paid"></td>
</tr>
<tr>
<th>Balance:</th>
<td id="total_balance"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-green-600" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have an ajax function that gets an array of data from the backend and when I try to append those data in the blade it only shows 1 row instead of an array of rows.
Issues
Only 1 row append by ajax
Select option will be empty when results return while I don't have any code to clear my select option.
Code
$(function() {
// get cities
$('#province').on('change', function(e) {
e.preventDefault();
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
});
var hospitalId = $(this).val();
$.ajax({
url: '{{ url('hospitals') }}/'+encodeURI(hospitalId),
dataType: "json",
type: 'GET',
success: function(data) {
console.log('dd: ', data.data);
if(data.data != null) {
$('.resError').hide();
$('.result').show();
// data to append
$.each(data.data, function(key, value) {
$('#code').html(value.code);
$('#name').html(value.name);
$('#type').html(value.type);
$('#class').html(value.class);
$('#beds').html(value.beds);
$('#owner').html(value.owner);
$('#province').html(value.province);
$('#city').html(value.city);
$('#address').html(value.address);
});
} else {
$('.resError').show();
$('.result').hide();
$('.resError').html('something went wrong, try again!');
}
},
error:function(err) {
$('.resError').show();
$('.resError').html('You need to select province!');
$('.result').hide();
$('#code').html('');
$('#name').html('');
$('#type').html('');
$('#class').html('');
$('#beds').html('');
$('#owner').html('');
$('#province').html('');
$('#city').html('');
$('#address').html('');
}
});
});
});
results
Update
<p>Results</p>
<div class="resError clearfix mt-4" style="display:none;"></div>
<div class="result clearfix mt-4" style="display:none;">
<table class="mb-3 table table-bordered table-hover">
<tbody>
<tr>
<th width="50">Code</th>
<td id="code"></td>
</tr>
<tr>
<th width="50">Name</th>
<td id="name"></td>
</tr>
<tr>
<th width="50">Type</th>
<td id="type"></td>
</tr>
<tr>
<th width="50">Class</th>
<td id="class"></td>
</tr>
<tr>
<th width="50">Beds</th>
<td id="beds"></td>
</tr>
<tr>
<th width="50">Owner</th>
<td id="owner"></td>
</tr>
<tr>
<th width="50">Province</th>
<td id="province"></td>
</tr>
<tr>
<th width="50">City</th>
<td id="city"></td>
</tr>
<tr>
<th width="50">Address</th>
<td id="address"></td>
</tr>
</tbody>
</table>
</div>
in blade
<p>Results</p>
<div class="resError clearfix mt-4" style="display:none;"></div>
<div class="result clearfix mt-4" style="display:none;">
<table class="mb-3 table table-bordered table-hover">
<tbody id="body">
</tbody>
</table>
</div>
in javascript
$.each(data.data, function(key, value) {
var element = `
<tr>
<th width="50">Code</th>
<td id="code">${value.code}</td>
</tr>
<tr>
<th width="50">Name</th>
<td id="name">${value.name}</td>
</tr>
<tr>
<th width="50">Type</th>
<td id="type">${value.type}</td>
</tr>
<tr>
<th width="50">Class</th>
<td id="class">${value.class}</td>
</tr>
<tr>
<th width="50">Beds</th>
<td id="beds">${value.beds}</td>
</tr>
<tr>
<th width="50">Owner</th>
<td id="owner">${value.owner}</td>
</tr>
<tr>
<th width="50">Province</th>
<td id="province">${value.province}</td>
</tr>
<tr>
<th width="50">City</th>
<td id="city">${value.city}</td>
</tr>
<tr>
<th width="50">Address</th>
<td id="address">${value.address}</td>
</tr>
`;
$('#body')append(element);
});
In your below code, you are appending value by the fieldId, that's why it is only appending only the last row(each iteration, the value is being updated in background) values are being set.
$('#code').html(value.code);
$('#name').html(value.name);
$('#type').html(value.type);
$('#class').html(value.class);
$('#beds').html(value.beds);
$('#owner').html(value.owner);
$('#province').html(value.province);
$('#city').html(value.city);
$('#address').html(value.address);
So, to achieve your purpose, you have to append these as a complete row and insert into the table, not just appending fieldwise value but rowwise and insert that row into the table. I hope you get my point.
The problem is that you are always changing the same elements of the same table. I think you will need to append one table per row:
$.each(data.data, function(key, value) {
$(".result").append('<table class="mb-3 table table-bordered table-hover">...</table>')
});
However, you may want to use Handlebars or some other templating library to avoid creating a long string with the table.
I have to the below JSON data in a bootstrap table. I can show the one level data, but I don't know how to show array inside array data in bootstrap table.
[
{
"seriesName": "Indian Bank",
"dataVlaues": {
"11/12/2017": 50,
"11/13/2017": 40,
"11/14/2017": 60,
"11/11/2017": 100
}
},
{
"seriesName": "Indian Bank1",
"dataVlaues": {
"11/18/2017": 12,
"11/17/2017": 27,
"11/16/2017": 30,
"11/15/2017": 101
}
}
]
Please find working solution below, enjoy :)
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.userTypes = [{
"type": 'Parent',
"options": {
"option1": "11QWERT",
"option2": "22QWERT"
}
}, {
"type": 'Parent1',
"options": {
"option22": "11QWERT",
"option222": "22QWERT"
}
}];
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<table class="table table-bordered">
<thead>
<tr>
<th>Type</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="user in userTypes">
<td>{{user.type}}</td>
<td>
<button ng-click="showOptions = !showOptions" class="btn btn-xs btn-primary">
Show
</button>
</td>
</tr>
<tr ng-repeat-end ng-if="showOptions">
<td colspan="2">
<table class="table table-bordered">
<tbody>
<tr ng-repeat="(key, val) in user.options">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Please check this jsfiddle link
https://jsfiddle.net/lalitSachdeva1/0xb732e1/1/
I have updated the ul li to table like structure;
your js will remain same and the key concept here is ng-repeat-start and ng-repeat-end
<div ng-app="myApp">
<div ng-controller="myCtrl">
<table>
<thead>
<tr>
<td>parent</td>
<td>option1</td>
<td>option2</td>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="user in userTypes">
<td>{{user.type}}</td>
<td ng-repeat-start="(key,value) in user.options">{{key}}</td>
<td ng-repeat-end="(key,value) in user.options">{{value}}</td>
</tr>
</tbody>
</table>
</div>
</div>