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-10 18:43:03Z

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, 2016 at 18:43

answered May 10, 2016 at 17:49

Imprfectluck

6847 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Imprfectluck Over a year ago

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 Over a year ago

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.

NewBee Over a year ago

yes i'm just doing that..also i've attached the console error in the edited question now..if you can help..

Imprfectluck Over a year ago

I believe the JSfiddle works without any issue? Where are you getting this error?

NewBee Over a year ago

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

|

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related