>> HERE YOU CAN VIEW AND TEST THE PROJECT ONLINE << (on GitHub io)
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog Kinvey</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="blog-solution.js"></script>
</head>
<body>
<h1>All Posts</h1>
<button id="btnLoadPosts">Load Posts</button>
<select id="posts"></select>
<button id="btnViewPost">View</button>
<h1 id="post-title">Post Details</h1>
<ul id="post-body"></ul>
<h2>Comments</h2>
<ul id="post-comments"></ul>
<script>
attachEvents();
</script>
</body>
</html>
The blog-solution.js from line #8 with the function attachEvents():
function attachEvents() {
const kinveyAppId = "yourKinveyID";
const serviceUrl = "https://baas.kinvey.com/appdata/" + kinveyAppId;
const kinveyUsername = "peter";
const kinveyPassword = "p";
const base64auth = btoa(kinveyUsername + ":" + kinveyPassword);
const authHeaders = {"Authorization": "Basic " + base64auth};
let postOptionsContainer = $('#posts');
$('#btnLoadPosts').click(loadPostsInDropDown);
$('#btnViewPost').click(loadSelectedPost);
function loadPostsInDropDown() {
let getPostsRequest = {
method: "GET",
url: serviceUrl + "/posts",
headers: authHeaders
};
$.ajax(getPostsRequest)
.then(displayPostOptions)
.catch(displayError);
function displayPostOptions(posts) {
postOptionsContainer.empty();
for (let post of posts) {
$('<option>').text(post.title)
.val(post._id)
.appendTo(postOptionsContainer);
}
}
}
function loadSelectedPost() {
let selectedPost_Id = postOptionsContainer.val(); // selected option
let postRequest = $.ajax({
method: "GET",
url: serviceUrl + "/posts/" + selectedPost_Id,
headers: authHeaders
});
let postCommentsRequest = $.ajax({
method: "GET",
url: serviceUrl + `/comments/?query={"post_id":"${selectedPost_Id}"}`, // query post's comments
headers: authHeaders
});
Promise.all([postRequest, postCommentsRequest])
.then(displayPostWithComments)
.catch(displayError);
function displayPostWithComments([post, postComments]) {
$('#post-title').text(post.title);
$('#post-body').text(post.body);
$('#post-comments').empty();
for (let comment of postComments) {
$('<li>').text(comment.text)
.appendTo($('#post-comments'));
}
}
}
function displayError(error) {
let errorMsg = 'Error: ';
if (error.status && error.statusText)
errorMsg += `${error.status} (${error.statusText})`;
else if (error.name && error.message)
errorMsg += `${error.name} (${error.message})`;
let errorDiv = $('<div>').text(errorMsg)
.prependTo($('body'));
setTimeout(function () {
errorDiv.fadeOut(function () {
errorDiv.remove();
});
}, 2000);
}
}
About the Kinvey: First you need to create Kinvey account and add posts + comments there:
Create a user and a password. You will need these, along with your app ID to authenticate with the server from your JS program.
Note the empty line between the header and the content, the request won’t work without it. Replace the highlighted parts with the relevant info. The authorization string is your username and password appended together with a colon between them as string, hashed with the btoa() function (built into the browser). The resulting post will have an _id automatically assigned by Kinvey. You will then use this ID when creating comments for each blog post.
Account
