Write a JS program for reading blog content. It needs to make requests to the server and display all blog posts and their comments. Use the following HTML to test your solution:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Blog</title> <script src="https://code.jquery.com/jquery-3.1.1.min.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 src="solution.js"></script> <script> attachEvents(); </script> </body> </html>
En attachEvents() function attaches events to the buttons and contains all program logic. You will need to create a Kinvey database to test your code (instructions bellow).
The button with ID "btnLoadPosts" should make a GET request to "/posts". The response from the server will be an array of objects with format:
{ _id: "postId",
title: "postTitle",
body: "postContent" }
Create an <option> for each post using its _id as value and title as text inside the node with ID "posts".
When the button with ID "btnViewPost" is clicked should make a GET request to "/posts/{postId}" to obtain just the selected post (from the dropdown menu with ID "posts") and another request to "/comments/?query={"post_id":"{postId}"}" to obtain all comments (replace highlighted parts with the relevant value). The first request will return a single object as described above, while the second will return an array of objects with format:
{ _id: "commentId",
text: "commentCOntent",
post_id: "postId"}
Display the post title inside "#post-title" and the post content inside "#post-body". Display each comment as a <li> inside "#post-comments" and don’t forget to clear its contents beforehand.
To create a Kinvey database with the required content, you need to register an account and create a new backend app.
>> 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 y 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.
