Automated RSS Feed List With jQuery using Google Feed API not working

Question

I'm trying to build rss feed in jQuery without using any plugin and I found a solution here: designshack.net it uses Google Feed API which is no more in use. I found the solution quite easy but it isn't working. All I'm looking for is a RSS feed that parses JSON response from other blogs/sites using jQuery without any plugin.

also attaching fiddle link.

code is here:

<!doctype html>
<html lang="en-US">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Type" content="text/html">
<title>Automated jQuery RSS Feed Demo</title>
   <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script type="text/javascript" language="javascript" src="js/parser.js"></script>
</head>

<body>
   <div id="topbar"><a href="http://designshack.net">Back to Design Shack</a></div>

   <div id="w">
     <div id="content">
       <h1>Automated jQuery RSS Feed Listing</h1>

       <div id="nouperss" class="feedcontainer"></div>
       <hr>

     </div><!-- @end #content -->
   </div><!-- @end #w -->
<script type="text/javascript">
$(function(){
// running custom RSS functions
 parseRSS('http://www.noupe.com/feed/', '#nouperss');

});
</script>
</body>
</html>

parser.js (jQuery)

/**
 * parses any RSS/XML feed through Google and returns JSON data
 * source: http://stackoverflow.com/a/6271906/477958
*/
function parseRSS(url, container) {
  $.ajax({
  url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
  dataType: 'json',
  success: function(data) {
  //console.log(data.responseData.feed);
      $(container).html('<h2>'+capitaliseFirstLetter(data.responseData.feed.title)+'</h2>');

  $.each(data.responseData.feed.entries, function(key, value){
    var thehtml = '<h3><a href="'+value.link+'" target="_blank">'+value.title+'</a></h3>';
    $(container).append(thehtml);
      });
     }
  });
}

/**
 * Capitalizes the first letter of any string variable
 * source: http://stackoverflow.com/a/1026087/477958
*/
function capitaliseFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
}

*css not attached. tell me if needed

EDIT: here's the error:

Imprfectluck · Accepted Answer · 2016-05-10T18:43:03.567

2

In the JSfiddle external resources use just this

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

instead of using the whole HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

tag. It works now

https://jsfiddle.net/6qsmLoog/1/

EDIT:I changed your JS fiddle to add that.so the link now shows the feed.

EDIT2: running it locally

change the URL in ajax from this

 url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),

to

 url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),

Since document.location.protocol searches for the protocol in the document location, locally ,it is file:// instead of http:// .In JSfiddle which runs on the server the protocol is set properly to http.

edited May 10 '16 at 18:43

answered May 10 '16 at 17:49

Imprfectluck

654
6
26

So in Jsfiddle . on the right hand side. There is a tab called external resources. Here you should mention path to jquery. You hav added the whole html tag there. Essentially it did not recognise the jquery library. Just make sure the Jquery library is imported properly. Simple as that – Imprfectluck May 10 '16 at 18:10
One tip. Just open the browser console and you find an error $ is undefined reference which usually means Jquery is not imported properly.I would usually start debugging on the developer console on your browser. – Imprfectluck May 10 '16 at 18:11
yes i'm just doing that..also i've attached the console error in the edited question now..if you can help.. – NewBee May 10 '16 at 18:19
I believe the JSfiddle works without any issue? Where are you getting this error? – Imprfectluck May 10 '16 at 18:23
yes the JSfiddle you provided works good, but I'm facing error in the browser as I run the code in my computer and not JSfiddle. I think I'm messing the header files. instead of JSfiddle, if you can look at the code above and suggest changes, it would be a great help – NewBee May 10 '16 at 18:26
Ok the problem is this line,. url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url) . the document.location.protocol is "file" in you system. But on a server it ll be http. so change that line to url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url), – Imprfectluck May 10 '16 at 18:40
edited the answer to include the solution for local issue. – Imprfectluck May 10 '16 at 18:43
oh you're a savior! thanks. its working. and sorry for pushing it hard on you...thanks again! – NewBee May 10 '16 at 18:49
can you please have a look on this? http://stackoverflow.com/questions/37331061/cannot-replace-class-on-the-fly-from-localstorage-in-jquery-rss-feed – NewBee May 20 '16 at 06:58

Automated RSS Feed List With jQuery using Google Feed API not working

1 Answers1