How to implement feed
Let's take a test url, for example (the number in the url is the user ID):
http://rusconashine.com/sk/user-feed/3529
If we call this url, for example in a browser, we get a json response with the user's posts.
The structure will look like this:
[
{
"post":{
"created":{
"date": string,
"time": string
},
"text": string,
"url": string,
"image": string,
"likeCount": int,
"commentCount":int,
"hasMethod": bool
},
"user":{
"avatar": string,
"url": string,
"nick": string
}
}
]
Contains an array of objects, where each object is one post detail.
The object has two parts, content information and user information.
I'll describe on the list
- post - information about the post
-
created - date of post created
- date - first part of date (for example 02.05.2022)
- time - second part of date (for example 11:25:56)
- text - post descriptions
- url - post url
- image - post image url
- likeCount - number of likes on this post
- commentCount - number of comments on this post
- hasMethod - if it contains a solution procedure
-
created - date of post created
-
user - information about the user
- avatar - avatar url
- url - user detail url
- nick - user nickname
Now there is nothing stopping us from implementing our feed anywhere on the web.
First, let's look at the result of our solution. The system selects a random user from the system, and processes his feed of posts.
If we use javascript, let's write a function that will retrieve Json from the server:
let jsonUrl = 'http://rusconashine.com/sk/user-feed/3529'
// define variable for load json
const getConnectinJSON = function (url, callback) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function () {
const status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status, xhr.response);
}
};
xhr.send();
};
Now we will create a DIV in html, in our case it will have div#id="sampleUserJson", into which we will load the post.
// set default loading status for div#id
document.getElementById("sampleUserJson").textContent = "loading...";
// load url
getConnectinJSON(jsonUrl,
function (err, data) {
if (err !== null) {
// if error
document.getElementById("sampleUserJson").textContent = "error " + err;
} else {
// if response is success
console.log(data)
// process response
....
}
});
You can process the result as you like, for example I use pure javascript to create a post block:
let currentItem = data[i];
// create html structure
const mainDivTag = document.createElement("div");
const nickLinkTag = document.createElement('a');
const detailLinkTag = document.createElement('a');
const nickStrongTag = document.createElement("strong");
const dateSpanTag = document.createElement("span");
const aboutPTag = document.createElement("p");
const imageImgTag = document.createElement("img");
// set html attributes
imageImgTag.setAttribute('src', currentItem.post.image)
mainDivTag.setAttribute('class', 'sample');
nickLinkTag.setAttribute('target', '_blank');
nickLinkTag.setAttribute('href', currentItem.user.url)
detailLinkTag.setAttribute('target', '_blank')
detailLinkTag.setAttribute('href', currentItem.post.url)
// set text with html
aboutPTag.innerHTML = currentItem.post.text.slice(0, 1000);
dateSpanTag.innerText = currentItem.post.created.date + ' ' + currentItem.post.created.time
nickStrongTag.innerText = currentItem.user.nick
detailLinkTag.innerText = 'post detail';
nickLinkTag.appendChild(nickStrongTag)
mainDivTag.appendChild(nickLinkTag)
mainDivTag.appendChild(dateSpanTag)
mainDivTag.append(imageImgTag)
mainDivTag.append(aboutPTag)
mainDivTag.append(detailLinkTag)`
The whole processing could look like this:
<html>
<body>
<div id="sampleUserJson"></div>
</body>
<script type="text/javascript">
let jsonUrl = "url";
// define variable for load json
const getConnectinJSON = function (url, callback) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function () {
const status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status, xhr.response);
}
};
xhr.send();
};
// set default loading status for div#id
document.getElementById("sampleUserJson").textContent = "loading...";
// load url
getConnectinJSON(jsonUrl,
function (err, data) {
if (err !== null) {
// if error
document.getElementById("sampleUserJson").textContent = "error " + err;
} else {
// if response
document.getElementById("sampleUserJson").textContent = "";
// iterate response
for (let i = 0; i < data.length; i++) {
// curent item
let currentItem = data[i];
// create html structure
const mainDivTag = document.createElement("div");
const nickLinkTag = document.createElement('a');
const detailLinkTag = document.createElement('a');
const nickStrongTag = document.createElement("strong");
const dateSpanTag = document.createElement("span");
const aboutPTag = document.createElement("p");
const imageImgTag = document.createElement("img");
// set html attributes
imageImgTag.setAttribute('src', currentItem.post.image)
mainDivTag.setAttribute('class', 'sample');
nickLinkTag.setAttribute('target', '_blank');
nickLinkTag.setAttribute('href', currentItem.user.url)
detailLinkTag.setAttribute('target', '_blank')
detailLinkTag.setAttribute('href', currentItem.post.url)
// set text with html
aboutPTag.innerHTML = currentItem.post.text.slice(0, 1000);
dateSpanTag.innerText = currentItem.post.created.date + ' ' + currentItem.post.created.time
nickStrongTag.innerText = currentItem.user.nick
detailLinkTag.innerText = 'post detail';
nickLinkTag.appendChild(nickStrongTag)
mainDivTag.appendChild(nickLinkTag)
mainDivTag.appendChild(dateSpanTag)
mainDivTag.append(imageImgTag)
mainDivTag.append(aboutPTag)
mainDivTag.append(detailLinkTag)
// break loop if is > 2
document.getElementById("sampleUserJson").append(mainDivTag);
if (i >= 2){
break;
}
}
}
});
</script>
</html>
