michaelbrazell · September 24, 2018 06:21 · banyerhan · Sep 24, 2018
diff --git a/WP Loop Through Custom Post Type with JSON b/WP Loop Through Custom Post Type with JSON
 <html>
 <head>
 	<title>Looping through json object</title>
 	<script type="text/javascript">
 	/*
 	Looping through your custom post type data using Wordpress rest API
 	You'll need this plugin as of 1/15/2015. http://wp-api.org/
 	Eventually this will be included in the WP Core.  Supposed to be with 4.1, but that didn't happen.
 	*/
 	</script>
 	<script type="text/javascript">
 		var xhr = new XMLHttpRequest();
 		xhr.onload = function() {
 			if(xhr.status === 200) {
 				responseObject = JSON.parse(xhr.responseText);

 				// Build up strings
 				var newContent='';
 				for (var i = 0; i < responseObject.length; i++) { // Loop through items
 					newContent += '<ul class="items">';
 					newContent += '<li><strong>Title:</strong> ' + responseObject[i].title +  '<br><strong>ID:</strong> ' + responseObject[i].ID + '</li>';
 					newContent += '</ul>';
 				}
 				// Update page
 				document.getElementById('container').innerHTML = newContent;
 			}
 		};
 		// Your post type name goes here after ?type
 		// Alternatively, you could loop through all posts by dropping the query string
 		xhr.open('GET', '/wp-json/posts?type=custom-post-type-name', true);
 		xhr.send(null);
 	</script>
 </head>
 <body>
 <h1>Custom Post Type Content</h1>
 <p>Display your content here</p>
 <div id="container"></div>
 </body>
 </html>
	<html>
	<head>
	<title>Looping through json object</title>
	<script type="text/javascript">
	/*
	Looping through your custom post type data using Wordpress rest API
	You'll need this plugin as of 1/15/2015. http://wp-api.org/
	Eventually this will be included in the WP Core. Supposed to be with 4.1, but that didn't happen.
	*/
	</script>
	<script type="text/javascript">
	var xhr = new XMLHttpRequest();
	xhr.onload = function() {
	if(xhr.status === 200) {
	responseObject = JSON.parse(xhr.responseText);

	// Build up strings
	var newContent='';
	for (var i = 0; i < responseObject.length; i++) { // Loop through items
	newContent += '<ul class="items">';
	newContent += '<li><strong>Title:</strong> ' + responseObject[i].title + '<br><strong>ID:</strong> ' + responseObject[i].ID + '</li>';
	newContent += '</ul>';
	}
	// Update page
	document.getElementById('container').innerHTML = newContent;
	}
	};
	// Your post type name goes here after ?type
	// Alternatively, you could loop through all posts by dropping the query string
	xhr.open('GET', '/wp-json/posts?type=custom-post-type-name', true);
	xhr.send(null);
	</script>
	</head>
	<body>
	<h1>Custom Post Type Content</h1>
	<p>Display your content here</p>
	<div id="container"></div>
	</body>
	</html>