<!DOCTYPE html>
<html>
<head>
<!--load bootstrap for styling -->
<link data-require="bootstrap-css@3.1.0" data-semver="3.1.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" />
<!-- load angular.js -->
<script data-require="angular.js@1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
<!-- in the script.js our all angular code -->
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container" ng-controller="SearchingCtrl">
<div class="jumbotron">
<img src="http://tech-blog.maddyzone.com/wp-content/uploads/2013/10/maddyzone-logo-300x72.png">
<br/>
<h1>Dynamically get rss feed by using Javascript from a URL</h1>
<br/>
<div class="example">
<label>Feed URL</label>
<input type="text" class="inputE" name="feedURL" id="feedURL" value="http://rss.news.yahoo.com/rss/topstories" placeholder="Enter Feed URL" size="50"/><br>
<label>Number of Feed Fetch</label>
<input type="text" class="inputE" name="fetchFeed" id="fetchFeed" value="" placeholder="Enter Number of Feed to Fetch" size="50">
<input type="button" class="inputE" name="getFeed" id="getFeed" value="Get Feed" onclick="getFeed()"/>
<div class="loading_rss" id="loading_feed" style="display:none;">
<img alt="Loading..." src="https://raw.githubusercontent.com/Maddyzone/dynamically-get-rss-feed-by-using-Javascript-from-a-URL/master/images/loading.gif" />
</div>
<div class="post_results" id="post_results1">
</div>
<div style="clear:both;"></div>
</div>
<div id="footer">
</div>
<br/>
See Full Article at <a href="http://tech-blog.maddyzone.com/javascript/how-to-dynamically-get-rss-feed-by-using-javascript-from-a-url">How to dynamically get rss feed by using Javascript from a URL</a>
</div>
</div>
</body>
</html>
var rssReader = {
containers : null,
// initialization function
init : function(selector,googUrl) {
// creating temp scripts which will help us to transform XML (RSS) to JSON
var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('charset','utf-8');
script.setAttribute('src',googUrl);
document.getElementById("footer").appendChild(script);
},
// parsing of results by google
parse : function(context, data) {
var container = document.getElementById(context);
container.innerHTML = '';
// creating list of elements
var mainList = document.createElement('ul');
// also creating its childs (subitems)
var entries = data.feed.entries;
for (var i=0; i<entries.length; i++) {
var listItem = document.createElement('li');
var title = (i+1)+" . "+entries[i].title;
var contentSnippet = entries[i].contentSnippet;
var contentSnippetText = document.createTextNode(contentSnippet);
var link = document.createElement('a');
link.setAttribute('href', entries[i].link);
link.setAttribute('target','_blank');
var text = document.createTextNode(title);
link.appendChild(text);
// add link to list item
listItem.appendChild(link);
var desc = document.createElement('p');
desc.appendChild(contentSnippetText);
// add description to list item
listItem.appendChild(desc);
// adding list item to main list
mainList.appendChild(listItem);
}
container.appendChild(mainList);
document.getElementById("loading_feed").style.display = "none";
}
};
//getFeed method called when getFeed button is clicked
function getFeed(){
var feedURL = document.getElementById("feedURL").value;
var fetchFeed = document.getElementById("fetchFeed").value;
if(feedURL == ""){
alert("Please Enter Feed URL");
}else if(fetchFeed == ""){
alert("Please Enter Number of Feed to Fetch");
}else{
document.getElementById("loading_feed").style.display = "block";
var url = encodeURIComponent(feedURL);
var googUrl = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+fetchFeed+'&q='+url+'&callback=rssReader.parse&context=post_results1';
console.log(googUrl);
rssReader.init('post_results1',googUrl);
}
}
body{background:#ccc;margin:0;padding:0}
.example{background:#FFF;width:90%;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;}
h2{
color: #777;
}
label{
width: 100px;
}
.post_results {
margin: 5px;
width: 99%;
border:1px solid #ccc;
float:left;
}
.post_results ul {
list-style:none;
text-align:left;
padding:0;
margin: 0;
}
.post_results ul li {
background: #aaa;
height: 80px;
padding: 10px;
}
.post_results ul li:hover{
background: #666;
}
.post_results ul li a{
color: #fff;
display: block;
font-size: 14px;
font-weight: bold;
text-decoration: none;
margin-bottom:5px;
}
.post_results ul li a:hover{
color: #eee;
}
.post_results ul li p {
color: #ddd;
font-size: 13px;
margin: 0;
}
.inputE{
padding: 5px;
margin: 10px;
}
How to Dynamically get rss feed by using Javascript from a URL