sali1101
4/23/2020 - 1:32 AM

.each loop

echo json with loop working
content_copyfile_download
<!-- 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>