Ruscona - Shine

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

http://rusconashine.com/en/user-feed/353

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.

---

---

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/en/user-feed/353', 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: