parsing xml using jquery and ajax

Question

I have an rss feed for my podcast and essentially what I am trying to do is populate an html5 audio player with URLs within the RSS feed.

I figure the best way to go about this is to parse the links using ajax and then append them into the src of the audio player. I am aware of the same domain policy that would prevent me doing this with ajax, so I am using the cross domain ajax plugin (http://bit.ly/Jbi9iX) to get around this.

I am struggling to figure out exactly why the code below is not working for me, basically at this stage I simply want to append the url's within the RSS feed into the #results to show that its working, then I will add it to the src part of the audio player.

$(document).ready(function () {
    $.ajax({
        url: 'http://theresidency.libsyn.com/rss',
        type: 'GET',
        dataType: "xml",
        success: parseXml
    });
});

function parseXml(xml) {
var item = $(xml).find("item");

  $(item).each(function() {
    $("#results").append($("enclosure").attr("url").text() + "<br />");
  });

}

I am not getting any errors in chrome dev tools, and I have looked around at other examples but I can figure out what I'm doing wrong.

Here is an example of the xml/rss: http://pastebin.com/stuY495c And here is what I have so far uploaded: http://bit.ly/J9QHZc

Any help would be much appreciated so thanks in advance!

adeneo · Accepted Answer · 2012-05-13 23:15:46Z

6

Where exactly are you passing the data to the function, I think you need to do:

$(document).ready(function () {
    $.ajax({
        url: 'http://theresidency.libsyn.com/rss',
        type: 'GET',
        dataType: "xml",
        success: function(data) {
           parseXml(data);
        }
    });
});

function parseXml(xml) {
var item = $(xml).find("item");

  $(item).each(function() {
    $("#results").append($("enclosure").attr("url").text() + "<br />");
  });

}

or just:

$(document).ready(function () {
    $.ajax({
        url: 'http://theresidency.libsyn.com/rss',
        type: 'GET',
        dataType: "xml"
    }).done(function(xml) {
        $.each($("item", xml), function(i, e) {
            $("#results").append($("enclosure").attr("url").text() + "<br />");
        });
    });
});

EDIT:

Did some more fiddling with this, and came up with:

$(document).ready(function () {
    $.ajax({
        url: 'http://query.yahooapis.com/v1/public/yql?q=%20SELECT%20*%20FROM%20xml%20WHERE%20url%3D%22http%3A%2F%2Ftheresidency.libsyn.com%2Frss%22&format=json&callback=',
        dataType: "json"
    }).done(function(data) {
        $.each(data.query.results.rss.channel.item, function() {
            $("#results").append(this.enclosure.url + "<br />");
        });
    });
});

I do believe that is what you are looking for, here's a DEMONSTRATION

edited May 13, 2012 at 23:15

answered May 13, 2012 at 20:49

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

6 Comments

Michael Over a year ago

thanks for the reply dude, I've updated my latest version but it still doesn't pull anything into the div :/ and i've tried both solutions

adeneo Over a year ago

You're probably not getting anything back at all, try logging the returned data to the console, and look for allow origin errors aswell, as xml is'nt normally supported if this cross domain.

adeneo Over a year ago

@Michael - did some testing, and edited my answer with a solution that should work.

Michael Over a year ago

I see this converts the XML to JSON which was something I was going to look into, and it worked perfectly my friend, thankyou very much!

adeneo Over a year ago

yes, just access it like so : var first = data.query.results.rss.channel.item[0].enclosure.url;

|

Kvam · Accepted Answer · 2012-05-13 22:06:12Z

1

Turns out, parsing RSS is a bit more complicated than basic XML parsing. Don't worry though, google can do the job for you and return a json-object:

$(function() {
   parseRSS('http://theresidency.libsyn.com/rss');
});

function parseRSS(url) {
  $.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) {
      $.each(data.responseData.feed.entries, function() {
        $('#results').append(this.link + '<br />');
      })
    }
  });
}

edited May 13, 2012 at 22:06

answered May 13, 2012 at 21:42

Kvam

2,2282 gold badges21 silver badges35 bronze badges

9 Comments

Michael Over a year ago

Ah I didn't know that, I've tried your solution - pastebin.com/bhGAXydM but can't seem to get it to work, am I constructing it wrong?

Kvam Over a year ago

All you have to do is call parseRSS(url) directly: $(function () { parseRSS("theresidency.libsyn.com/rss"); });

Michael Over a year ago

I still can't manage it, tried pastebin.com/bhGAXydM but I'm now getting an uncaught syntax.

Kvam Over a year ago

By the way, I messed up the previous comment. New to this site. Updated the original post instead.

Michael Over a year ago

Not to worry amigo, that has done the trick, I completely misread your comment when I updated anyway. Thanks for the help, really appreciate it!

|

Collectives™ on Stack Overflow

parsing xml using jquery and ajax

2 Answers 2

6 Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related