How to dynamically get rss feed by using Javascript from a URL
Hi Friends, I wanna share my knowledge regarding “How to dynamically get rss feed by using Javascript from a URL” .
I know most of you have knowledge about this , but i want to share my blog may it will help you more regarding this in very easiest way and more user friendly.
In my blog , i will do the task in 3 steps basically.
In first step,** i will go through the requirement and create a basic html for our requirement**.
In second step, i will show you and describe you most about the java script for our objective.
In third step ,** i will show the output and the complete code for this**.
So let me start with first step:
Step 1:will go through the requirement and create a basic html for our requirement
Requirement :
Get News Feed by URL and Number of Feed to Fetch on Button Click Event
Solution :
To complete our requirement objective we need basically three files
- index.html
- main.js
- style.css
so our folder structure looks like :
Folder name (jsFeed)
- index.html
Folder name (js)
- main.js
Folder name (css)
- style.css
Folder name (images)
- loading.gif
Let’s First create a basic html for this, as per our requirement we need 2 text boxes which represents respectively “Feed URL” , which takes input of rss feed url and the second text box html element will take “Number of Feed to Fetch”.
Once , we create both of the text box element , i will create an event handler element by name button html element , which will perform the action when both of the inputs are available , by checking validation for both of the fields when click on button.
So my first step to create an html for our requirement is as shown below :
I create an onclick event on button click and call getFeed
function of javascript , which is well known not defined yet , will be defined in step-2.
As , I am thinking , when i get all feeds after placing my javascript code for this, i will get the result and i have to show this result also , so for this i have to create an html element also, where i will show the result.
So, i am writing the result oriented html below , which will included in above html , in div element by class name example
.
Did you get all the points and requirement defiend in Step-1, if you are ok will this , than i will now move to step-2 , where i will write the js code for the above.
Step-2: will show you and describe you most about the java script for our objective.
In step-2 , we will discuss how i will perform validation before getting rss feed and how i will get rss feed , if validation are successfully completed on button click event and calling getFeed
method as defined in html in step-1.
So lets start with creating in javascript function in our main.js
file by name getFeed
and checking the value of feedURL
and fetchFeed text box’s values if these are filled
then call rssReader.init
function by passing the url
and id
of the div element in which we have to show the desired result or feeds.
Our getFeed function looks like:
in rssReader we define 2 function , first one is init which is called when we complete validation step , and in this step we create a script tag element in which we pass the google api service to get rss feed url , which holds the information about
- “number of feed to fetch”,
- “feedurl from where we have to fetch url” ,
- “call back function when this api will got result from the sending url” ,
- “the element where we have to show the required result”.
after initialization we parse the required output to out post_result1
div element and create dynamic ul , li listing with the required information like the
- Title of the news
- Description about the news
- Link to the news
and append it, after append we hide the loading feed image which was loaded earlier on button click until we didn’t get the result, as we got the result, we will hide this element.
Now , i would like to move to step-3 , where i will show you the complete code for this with output.
step-3 : will show the output and the complete code for this.
So , all of this i have done here to complete the requirement, i hope you all got very well my blog, if you got any question regarding this, you can send me comments on this or if you like my post you can also share me your valuable feedback.
Please check the complete source code by clicking the below button or to download.