WordPress.com JSON Example: Posts
HTML
<a href="#" id="next">Next</a> | <a href="#" id="previous">Previous</a>
<div
id="loading">loading...</div>
<div id="post">
<h1><a href="" id="title"></a></h1>
<div id="content"></div>
<div id="byline"><a href="" id="comment_count"></a>
</div>
</div>
CSS
body {
padding: 1em;
}
h1 {
font-size: 2em;
}
p {
margin: 0.25em 0;
}
JavaScript
jQuery(function ($) {
var $content = $('#content');
var page_number = 3;
$("#next").on("click", function (event) {
$('#loading').show();
page_number++;
get_post(page_number, $content);
});
$("#previous").on("click", function (event) {
$('#loading').show();
page_number--;
get_post(page_number, $content);
});
get_post(page_number, $content, null);
function get_post(page_number, $content) {
$('#post').fadeOut();
$.getJSON('https://public-api.wordpress.com/rest/v1/sites/goinfinity.wordpress.com/posts/?number=1&callback=?&page=' + page_number)
.success(function (response) {
$('#loading').hide();
var found = response.found;
if (page_number <= 1) {
$('#previous').hide();
} else {
$('#previous').show();
}
if (page_number >= found) {
$('#next').hide();
} else {
$('#next').show();
}
$content.html(response.posts[0].content);
$content.find('img').each(function () {
var $this = $(this);
$this.height($this.height() / 2);
$this.width($this.width() / 2);
});
$('#title')
.html(response.posts[0].title)
.attr('href', response.posts[0].URL);
var comment_count = response.posts[0].comment_count == 0 ? 'No Comments' : response.posts[0].comment_count == 1 ? 'One Comment' : response.posts[0].comment_coun + ' Comments';
//get categories
var total_cat_num = getObjectSize(response.posts[0].categories);
var cat_count = 0;
var category_list = "";
$.each(response.posts[0].categories, function (index) {
var cat_sep = "";
cat_count++;
if (cat_count < total_cat_num) {
...