CODEWITHSUNDEEP
javascriptjqueryjson
hashim
hashim

Reputation: 135

Append data to html table using JQuery

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

enter image description here

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

Answers (1)

Majed Badawi
Majed Badawi

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

Related Questions