How to implement feed

Let's take a test url, for example (the number in the url is the user ID): 

http://rusconashine.com/hu/user-feed/696

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

Processing with jQuery will be very simple. We can directly use the $.getJSON function to retrieve the value and process the result. 

$.getJSON( jsonUrl, function( data ) {
    console.log(data)
});

Then you just need to process the result, the whole code can look like this for example: 

<div id="sampleUserJson"></div>

<script type="text/javascript">
    $(function() {
        $('#sampleUserJson').text('loading...');

        $.getJSON( 'http://rusconashine.com/hu/user-feed/696', function( data ) {
            $('#sampleUserJson').text('');
            for (let i = 0; i < data.length; i++){
                let item = data[i];

                $('#sampleUserJson').append('<div class="sample">' +
                    '<a href="' + item.user.url + '" target="_blank"><strong>' + item.user.nick + '</strong></a>' +
                    '<span>' + item.post.created.date + ' ' + item.post.created.time + '</span>' +
                    '<img src="' + item.post.image+ '">' +
                    '<p>' + item.post.text + '</p>' +
                    '<a target="_blank" href="' + item.post.url + '">post detail</a>' +
                    '</div>');
                if (i >= 2){
                    break;
                }
            }
        });
    });
</script>

And the result: