display json data in html table using jquery ajax code example

Example 1: how draw table from json ajax

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();

Example 2: how draw table from json ajax

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>WCF Client</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>

<table id="location" border='1'>
    <tr>
        <th>Countries</th>
         <th>Cities</th>
    </tr>
</table>

<script>

var service = 'http://localhost/DistributedDataSystem/Service.svc/';

$(document).ready(function(){

    jQuery.support.cors = true;

    $.ajax(
    {
        type: "GET",
        url: service + '/GetAllCountries/',
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        cache: false,
        success: function (data) {

        var trHTML = '';

        $.each(data.Countries, function (i, item) {

            trHTML += '<tr><td>' + data.Countries[i] + '</td><td>' + data.Cities[i] + '</td></tr>';
        });

        $('#location').append(trHTML);

        },

        error: function (msg) {

            alert(msg.responseText);
        }
    });
})

</script>

</body>
</html>

Tags:

Javascript Example

Recent Posts