How load json data to html table from ajax request

JavaScript
2

Hey Preemy,
Try this below code, I don’t know what is your HTML structure, but you can modify accordingly.

In html you should have like this:

<table id="dataTable">
  <tbody>
    
  </tbody>
</table>

And use this code for retrieving data & populating rows and columns:

let xhr = new XMLHttpRequest;
xhr.open('GET', 'your-url', true);
xhr.onload = function() 
{
  if (this.status === 200) 
  {
  	let data = JSON.parse(this.responseText).Table,
    		tbodyHtml = '';
    
    data.map(function(d) {
    	tbodyHtml =+ `
      	<tr>
        	<td>${d.ParentCategoryId}</td>
        	<td>${d.ParentCategoryName}</td>
        	<td>${d.IsActive}</td>
        </tr>
      `;
    });
    
    document.querySelector('#dataTable tbody').innerHTML = tbodyHtml;
  }
}
xhr.send();

Ask here if you face any issue.

Happy coding!!

1 Like