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/sk/user-feed/1237

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.

JavaScript
jQuery
PHP

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/sk/user-feed/1237'

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