<!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