How to implement feed
Let's take a test url, for example (the number in the url is the user ID):
https://www.rusconashine.com/en/user-feed/1735
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 = 'https://www.rusconashine.com/en/user-feed/1735' // 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>