<!-- CUstomized from the ajax working call
Learned from ------ https://stackoverflow.com/questions/733314/jquery-loop-over-json-result-from-ajax-success
-->
<!DOCTYPE html>
<html>
<head>
<title> Ajax and Json | Tutorial</title>
<style>
body{
font-family: sans-serif;
}
.ajax-container{
width: 50%;
margin: 50px auto;
}
#btnAjaxCall{
height: 50px;
width: 120px;
border: none;
border-radius: 6px;
color: white;
background: #3498db;
outline: none;
font-size: 22px;
opacity: 0.7;
padding: 10px;
}
#btnAjaxCall:hover{
cursor: pointer;
opacity: 1;
}
.item-details{
margin-top: 10px;
border: 1px solid #ddd;
padding: 6px;
}
</style>
</head>
<body>
<div class="ajax-container">
<input type="button" id="btnAjaxCall" value="Ajax Call" />
<div class="display-data">
</div>
</div>
<div id="result"> </div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>
$.ajax({
url:'http://zenployee.tk/wp-json/wp/v2/posts',
type:'GET',
success: function(data){
$(data.arrays).each(function(index,value) {console.log (value.id); });
}
});
</script>
<script>
var count = 0;
//$("#btnAjaxCall").click(function(){
//fetchDataAndDisplay();
//});
// function fetchDataAndDisplay(){
$.ajax({
url:"http://zenployee.tk/wp-json/wp/v2/posts",
method:"GET"
}).done(function(data){
$.each(data, function(index) {
alert(data[index].id);
alert(data[index].title.rendered);
$("#result").append(data[index].id); // **dont alert use this
});
});
/*
var start = count > 4 ? 25 * count : count;
var end = start + 5;
var str = '';
for(var i=start; i<end; i++){
str += '<div class="item-details">' +
'User Id is = ' + data[i].title.rendered + '<br />'+
'Id is= ' + data[i].id + '<br />' +
'Titile is = ' + data[i].title + '<br />' +
'</div>';
}
if(start == data.length){
count = 0;
$(".display-data").empty();
$(".display-data").append("List Traversed. Start over!");
return;
}
count++;
$(".display-data").empty();
$(".display-data").append(str);
})
*/
//}
</script>
</html>