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/2282
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.
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( 'https://www.rusconashine.com/hu/user-feed/2282', 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: