Let’s learn Fetch API aka. How to display Medium posts on a website with Javascript
Hi! Nice to see you here. So you would like to display You hard work from medium on your personal website? I’m here to help You!
In this project of ours, we are going to write HTML, CSS(SCSS), JavaScript. The plan is simple, so let’s get to work!
- “Download” all content from a profile.
- Transfer it to JSON.
- Filter for only actual blog posts.
- Properly display on Your website!
That will be easy peasy lemon squeezy!
On our journey, we are not going to use any JavaScript library or framework.
1. Getting our hand on the content!
Currently, Medium’s API doesn’t offer a way to access our content in JSON format. All we get is this dirty XML, which is not going to help us a lot.
But we it’s better than nothing, right? So to see all Your writings(comments and posts) we need to do the following:
https://medium.com/feed/@YOUR_USERNAME_GOES_HERE
That’s all. Easy, right?
2. Transform your hard work into lovely JSON format.
Here comes our hero! rss2json.com offers a nice and easy to use API to fulfill all of our needs in this case. (It’s not an advertisement)
Don’t be afraid! Even if You don’t know a thing about working with JSON, it’s not a problem..for this work at least :).
To get something from API, in most cases you need to give something first (almost like real life, right?). In This case, we just need to give the link from our Medium feed in XML. Just like below.
https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@YOUR_USERNAME_STILL_GOES_HERE
But the work isn’t done yet. Now we go to the fun part. Code!
We are going to use Fetch API.
What we could do to make our code better, is check, if we have connected to API with a simple if(status == “ok”), so if it fails, we can display a nice error message. But it’s not necessary here.
Now we are ready to do anything we want with our data!
3. Extract those sweet posts from this mess.
So, the response that we got is an array of content that we published on Medium.
It’s either a comment or a post. Each of those two carries info about the author, publish date, tags, thumbnail, content etc.. Looks something like this:
Now we have to separate our posts from the rest of the response’s items that we got from the API. We can use an easy trick to do this.
Following.. each item has categories, BUT! it’s always an empty array of categories when the item is a comment. So it’s nothing harder than just filter the whole response array from items, where categories == array.length > 0. Let’s do this!
Yay! We are almost done.
First, we plan, then we code.
If we want to have a card-looking thingy presenting our blog post we need to create an Array of HTML nodes, each of them with our blog post containing our name, title, content, pubDate etc. something like this:
We have to shorten our content because we probably don’t want to display the whole post on this little card :). If You don’t need this, You can skip to the beginning of the fourth part.
You still there? Great, let’s continue our study. (We are going to have one more issue soon.)
So, to shorten our content we need to transform it into plain text, without HTML tags so that we don’t get a massive heading in our preview!
Manageable like this: Its kind of a chip/non-fancy way but hey! It will work on any browser.
We will use this function later on. But let’s just check one little thing…
Our node, in this case, starts with: “Photo by Ian Schneider on Unsplash(…)”
What is wrong? That is the caption of our thumbnail!
But fear not, we can deal with it. We have to shorten that node anyway.
An easy slice method on our string(Array) and we are done.
Last step and we are done!
4. Display our masterpiece on a web page!
This task is nothing harder than creating a variable that will store all of our HTML with blog posts and than putting it inside our document.
So we create an empty output variable, go through our posts array and on our way we insert an HTML template with hooks: ${item.WHATEVER} (more about this syntax called “template operators” here)to the content.
What’s important is to use “+=” operator. We want to add new and keep previously added content to our variable and not only add and throw the old content away.
In the end, we select our output container and just stuff it with our beautiful content.
That’s the whole code.
I’m sharing with You a link to a Codepen where I added some HTML and SCSS to it, so You can see our whole work in action and a full presence!
https://codepen.io/Konrad29/pen/ZoQRoz
Thank a lot for reading, I hope it helped You with Your issue.
Have a wonderful day!
