CODEWITHSUNDEEP
javascripthtml
Ranto Berk
Ranto Berk

Reputation: 381

How to fetch JSOn response into HTML table using pure JS?

This is HTML markup:

<table id="prodTable" class="table table-bordered" style="color:white">
  <thead class="thead">
    <tr class="font-weight-bold">
      <th>No.</th>
      <th>Name</th>
      <th>Category</th>
      <th>Slug</th>
      <th>Price</th>
      <th>GST Price</th>
      <th>Keywords</th>
      <th>Specification</th>
      <th>Description</th>
      <th>Attributes</th>
      <th>Available Stock</th>
      <th>Payment Method</th>
      <th>Approval Status</th>
      <th>Approve</th>
      <th>Deal of the Day</th>
      <th>Edit & Delete</th>
    </tr>
  </thead>
  <tbody class="tbody">
     <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td><lable><input type="checkbox" id="approveProd" name="approval" value="approval">Approve</label></td>
       <td><label><input type="checkbox" id="DealoftheDay" name="dealoftheday" value="dealoftheday">Deal of the Day</label></td>
       <td><button class="btn btn-outline-info" type="button"><i class="fa fa-pencil-square"></i></button> <button class="btn btn-outline-danger" type="button"><i class="fa fa-trash"></i></button></td>
    </tr>
  </tbody>
</table>

and my js is

function getProductsData() {
    var data = "";
    var type = "application/x-www-form-urlencoded";
    var url = "get_product_data";
    var asyn = "true";
    var method = "POST";
    var respCallback = function(resp){
        var proddata = JSON.parse(resp);
        var table = document.getElementById('prodTable');
        console.log(table);
        for (var i = 0; i < proddata.length; i++) {
            console.log(proddata[i]);
        };
    }
    var res=serverRequest(data,method,url,asyn,type,respCallback);
}

the getProductsData() is a onload function written in the body and am getting the response as JSON.

I need to know how to populate the JSON response into the table. Am new to js and i dont need jquery code. Because am learning js.

Thanks in advance.

Upvotes: 0

Views: 1485

Answers (1)

Ronak Khangaonkar
Ronak Khangaonkar

Reputation: 346

Here is the short example which will help you, how to append the json data in HTML Table.

Example :-

        function append_json_data(data){
            var table = document.getElementById('prodTable');
            data.forEach((object) => {
                var tr = document.createElement('tr');
                tr.innerHTML = '<td>' + object.No + '</td>' +
                '<td>' + object.Name + '</td>' +
                '<td>' + object.Category + '</td>' +
                '<td>' + object.Slug + '</td>';
                '<td>' + object.GST_Price + '</td>';
                table.appendChild(tr);
            });
        }

And further you can apply the td tag for other elements as well, As I am showing you how to append the data to HTML you can add the tag data after 'GST_Price' same as above.

Upvotes: 1

Related Questions