Reputation: 135
How to append json data in table. Json data format : i want to loop throw this array and append the result to this html table
HTML table :
<table class="table table-bordered table-hover ">
<tr class="success">
<th>
Id
</th>
<th>
Name
</th>
<th>
Description
</th>
<th>
Price
</th>
<th>
Quantity
</th>
<th>
Amount
</th>
</tr>
<tbody id="tbdata">
<!-- data will go here -->
</tbody>
Upvotes: 0
Views: 1579
Reputation: 28434
You can use .each
to iterate over the array, and .append
to add rows:
const data = [
{ ItemId:1, Name:'Item 1', Description:'A', Price:1, Quantity:1, Amount:1},
{ ItemId:2, Name:'Item 2', Description:'B', Price:2, Quantity:2, Amount:2}
];
$.each(data, (index, row) => {
const rowContent
= `<tr>
<td>${row.ItemId}</td>
<td>${row.Name}</td>
<td>${row.Description}</td>
<td>${row.Price}</td>
<td>${row.Quantity}</td>
<td>${row.Amount}</td>
</tr>`;
$('#tbdata').append(rowContent);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-hover ">
<tr class="success">
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tbody id="tbdata">
</tbody>
</table>
Upvotes: 2