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/hu/user-feed/783

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
  • 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/hu/user-feed/783'

// 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>