CODEWITHSUNDEEP
jqueryhtmljsonparsingrss
Nick Balistreri
Nick Balistreri

Reputation: 131

Jquery RSS feed to HTML

So I have an RSS feed that is printing correctly to the console with no errors. I can see all the XML parsed in the console all nice and neat. When I try to display in my HTML all I see is "undefined". Here is my code:

<script>
$.ajax({
    url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('https://news.google.com/news?cf=all&hl=en&pz=1&ned=us&output=rss'),
    dataType : 'json',
    success  : function (data) {
        if (data.responseData.feed && data.responseData.feed.entries) {
            $.each(data.responseData.feed.entries, function (i, e) {
                console.log("------------------------");
                console.log("title      : " + e.title);
                console.log("author     : " + e.author);
                console.log("description: " + e.description);
                console.log("link: " + e.link);
            });
        }
        $('#rss-viewer')[0].innerHTML = data.innerHTML;
    }

});</script>  

<div id="rss-viewer"></div>

Any help greatly appreciated.

Upvotes: 1

Views: 1158

Answers (1)

SpYk3HH
SpYk3HH

Reputation: 22580

There's no data.innerHTML on the return. data has the properties .responseDate, .responseDetails, and .responseStatus.

That aside, as aforementioned in a comment, I wrote this plugin years ago that makes reading RSS with jQuery extremely easy. I've recently posted it to get hub and made a few changes to it so it's even easier to use. Below, you'll see a simple example using your link and some very simple jQuery for creating elements from the returned feed and adding them to the DOM.

Find On GitHub

Most basic use: $.jQRSS('http://www.yourRSSurl.com/', { options }, function (newsFeed, feedEntries) { /* do work! */ })

Example:

$.jQRSS('https://news.google.com/news?cf=all&hl=en&pz=1&ned=us&output=rss', { count: 8 }, function (feed, entries) {
	console.log('feed:', $(feed));
	$.each(entries, function(i) {
		if (this['content']) {
			var fieldset = $('<fieldset/>', { title: this.contentSnippet }).appendTo('body'),
			legend = $('<legend/>').appendTo(fieldset),
			$link = $('<a />', { href: this.link, html: this.title, target: '_blank' }).appendTo(legend),
			$date = $('<h5 />', { html: this.publishedDate, style: 'float:right;' }).appendTo(fieldset),
			$content = $(this.content).appendTo(fieldset);
			console.log('entry '+i+':', $(this));
		}
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://rawgit.com/JDMcKinstry/jQRSS/master/jQRSS.js"></script>

Upvotes: 2

Related Questions