Reference API:
https://restcountries.eu/
Code:
<!DOCTYPE html>
<html>
<head>
<title>API Call</title>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<style type="text/css">
*{
font-size: 13px;
margin: 0px;
padding: 0px;
font-family: arial;
}
.main-div{
width: 1000px;
height:auto;
margin: 0 auto;
border: 0px solid #ccc;
}
table{
border-collapse: collapse;
width: 100%;
}
table tr{
}
table tr th{
border:1px solid #ccc;
padding: 10px;
}
table tr td{
border:1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div class="main-div">
<table id="api-table">
<thead>
<tr>
<th>S.NO</th>
<th>Country</th>
<th>Capital</th>
<th>Region</th>
<th>Population</th>
<th>CallingCodes</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$.ajax({
url: 'https://restcountries.eu/rest/v1/all',
type: 'json',
method:'get'
})
.done(function(res) {
var table ='';
$.each(res, function(index, val) {
table+='<tr>';
table+='<td>'+(index+1)+'</td>';
table+='<td>'+res[index].name+'</td>';
table+='<td>'+res[index].capital+'</td>';
table+='<td>'+res[index].region+'</td>';
table+='<td>'+res[index].population+'</td>';
table+='<td>'+res[index].callingCodes+'</td>';
table+='</tr>';
});
$('table tbody').append(table);
$('table tr:odd').css('background-color','#ccc');
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
});
</script>
</body>
</html>
Demo:
0 comments:
Post a Comment