Access <link> value in XML with Javascript

Question

I'm using Ajax/jQuery to pull in some content from an RSS feed, but it seems to be failing to read the content of an XML node with the name 'link'.

Here's a simplified version of the XML:

<?xml version="1.0" encoding="UTF-8"?>
  <channel>
    <item>
      <title>Title one</title>
      <link>https://example.com/</link>
      <pubDate>Mon, 12 Feb 2019</pubDate>
    </item>
    <item>...</item>
    <item>...</item>
  </channel>
</xml>

And the code I'm using:

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         $('item', this.responseText).each(function(){
             var thisPostData = {};
             thisPostData.title = $(this).find('title').text();
             thisPostData.link = $(this).find('link').text();
             thisPostData.date = $(this).find('pubDate').text();
             posts.push(thisPostData);
          });
          console.log(posts);
       }
     };
   var posts = [];
   xhttp.open('GET', 'https://example.com/rssfeed/', true);
   xhttp.send();

You'll see I'm trying to add each 'item' to an object, and storing them inside the 'posts' array. 'Title' and 'pubDate' are stored fine but 'link' isn't.

The actual RSS feed in question contains a huge amount of extra data, all of which I can read except the 'link' nodes. Any suggestions why nodes called 'link' would act differently from all the others?

Answer 1

The problem is because you're attempting to parse XML as HTML. The <link> object in HTML is an inline element, not a block level one, so it has no textContent property for jQuery to read, hence the output is empty.

To fix this first read the XML using $.parseXML(), then put it in a jQuery object which you can traverse.

There's also a couple of things to note. Firstly you will need to remove the </xml> node at the end of the XML output as it's invalid and will cause an error when run through $.parseXML. Secondly you can use map() to build an array instead of manually calling push() on an array, and you can just return the object definition directly from that. Try this:

var responseText = '<?xml version="1.0" encoding="UTF-8"?><channel><item><title>Title one</title><link>https://example.com/</link><pubDate>Mon, 12 Feb 2019</pubDate></item><item><title>Title two</title><link>https://foo.com/</link><pubDate>Tue, 13 Feb 2019</pubDate></item></channel>';

var xmlDoc = $.parseXML(responseText)
var posts = $('item', xmlDoc).map(function() {
  var $item = $(this);
  return {
    title: $item.find('title').text(),
    link: $item.find('link').text(),
    date: $item.find('pubDate').text()
  };
}).get();

console.log(posts);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Lastly, you're using a rather odd mix of JS and jQuery. I'd suggest going with one or the other. As such, here's a full jQuery implementation with the AJAX request included too:

$.ajax({
  url: 'https://example.com/rssfeed/',
  success: function(responseText) {
    var xmlDoc = $.parseXML(responseText)
    var posts = $('item', xmlDoc).map(function() {
      var $item = $(this);
      return {
        title: $item.find('title').text(),
        link: $item.find('link').text(),
        date: $item.find('pubDate').text()
      };
    }).get();
    
    // work with posts here...
  }
});