Append data to html table using JQuery

Question

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>

FYI Stakoverflow is to find the code errors not to write code for each other. Please read the help center and find how to ask a well formed question stackoverflow.com/help/how-to-ask — Ali Sheikhpour
– Ali Sheikhpour, Commented Nov 20, 2020 at 22:05

Majed Badawi · Accepted Answer · 2020-11-20 21:59:30Z

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>

Collectives™ on Stack Overflow

Append data to html table using JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related