AaronRutley/wp-api-jquery-ajax.html

## wp-api-jquery-ajax.html
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>My App</title>

    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
            padding: 10px;
        }
        ul {
            list-style-type: none;
        }
        li {
            border-bottom: 1px solid #eee;
        }
    </style>

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

  </head>

  <body>
    <ul id="app"></div>
  </body>

  <script>
  jQuery(document).ready(function($) {
    $.get( "http://scottbolinger.com/wp-json/wp/v2/posts", function( data ) {

        $.each( data, function( i, val ) {
            $( "#app" ).append(
                '<li>' +
                    '<h3>' +
                    val.title.rendered +
                    '</h3>' +

                    '<p>' +
                    val.excerpt.rendered +
                    '</p>' +
                '</li>'
            );
        });
    });
  });
  </script>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	<title>My App</title>

	<style type="text/css">
	body {
	font-family: Arial, sans-serif;
	padding: 10px;
	}
	ul {
	list-style-type: none;
	}
	li {
	border-bottom: 1px solid #eee;
	}
	</style>

	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

	</head>

	<body>
	<ul id="app"></div>
	</body>

	<script>
	jQuery(document).ready(function($) {
	$.get( "http://scottbolinger.com/wp-json/wp/v2/posts", function( data ) {

	$.each( data, function( i, val ) {
	$( "#app" ).append(
	'<li>' +
	'<h3>' +
	val.title.rendered +
	'</h3>' +

	'<p>' +
	val.excerpt.rendered +
	'</p>' +
	'</li>'
	);
	});
	});
	});
	</script>

	</html>