CODEWITHSUNDEEP
javascriptrss
Wesley
Wesley

Reputation: 38

'object HTMLCollection' instead of Image URL from RSS

I'm trying to pull thumbnail URLs from a wordpress feed and keep getting [object HTMLCollection] instead of an image URL string for the thumbnail. The feed i'm pulling from is: https://harpercollegece.com/feed/. I know that the tag is named media:thumbnail and the value is stored in 'URL'. I can't find the correct way to reference this image inside of the forEach loop when running through each post. I've tried searching other posts as well as on google for several hours.

var proxy = 'https://api.allorigins.win/raw?url=';
var feeds = [
  'https://harpercollegece.com/feed/',
];

var limit = 10;

var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]);
  }
};

function strip_tags(string) {
  if ((string === null) || (string === '')) {
    return '';
  } else {
    string = string.toString();
  }
  string = string.replace('<![CDATA[', '');
  string = string.replace(' [&#8230;]]]>', '');
  string = string.replace(/<[^>]*>/g, '');
  string = string.replace(/&lt;[^>]*&gt;/g, '');
  string = string.replace(']]>', '');
  return string;
}

function get_rss(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) {
      return;
    }
    if (xhr.status >= 200 && xhr.status < 300) {
      var response = xhr.responseText;
      var parser = new window.DOMParser();
      var data = parser.parseFromString(response, "text/xml");
      var items = Array.from(data.querySelectorAll("item"));
      var output = '';
      forEach(items, function(index, item) {
        if (index <= limit) {
          var ilink = item.querySelector("link").innerHTML;
          var title = item.querySelector("title").innerHTML;
          var descr = item.querySelector("description").innerHTML;
          var thumb = item.getElementsByTagName("media:thumbnail");
          //console.log(item);
          output +=
          '<div class="ce-blog-slider-well">' +
             '<div class = "ce-blog-thumb">' +
              '<img class="blog-post-img" src="' + thumb + '" alt="Veterans Center Sign">' +
            '</div>' +  
            '<div class = "ce-blog-header">' +
              '<a href="' + ilink + '" target="_blank" rel="noopener">' + strip_tags(title) + '</a>' +
            '</div>' +
            '<div class ="ce-blog-descr">' + strip_tags(descr) + '</div>' +
          '</div>';
        }
      });
      var d1 = document.getElementById('wp-blog-posts');
      d1.insertAdjacentHTML("beforeend", output);  
    }
  };
  xhr.open('GET', url);
  xhr.send();
}

forEach(feeds, function(index, feed) {
  get_rss(proxy + encodeURIComponent(feed));
});
<div class="ce-blog-slider" id="wp-blog-posts"></div>

Upvotes: 1

Views: 153

Answers (1)

Liftoff
Liftoff

Reputation: 25392

getElementsByTagName returns an HTMLCollection. To get the URL, you'll have to grab the first element in that collection with [0]. The URL is stored in an attribute called url, a la

<media:thumbnail url="https://harpercollegece.files.wordpress.com/2021/01/writing-red-typewriter-typing.jpg" />

From your HTMLElement, get the url attribute like so:

var thumb = item.getElementsByTagName("media:thumbnail")[0].getAttribute("url");


var proxy = 'https://api.allorigins.win/raw?url=';
var feeds = [
  'https://harpercollegece.com/feed/',
];

var limit = 10;

var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]);
  }
};

function strip_tags(string) {
  if ((string === null) || (string === '')) {
    return '';
  } else {
    string = string.toString();
  }
  string = string.replace('<![CDATA[', '');
  string = string.replace(' [&#8230;]]]>', '');
  string = string.replace(/<[^>]*>/g, '');
  string = string.replace(/&lt;[^>]*&gt;/g, '');
  string = string.replace(']]>', '');
  return string;
}

function get_rss(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) {
      return;
    }
    if (xhr.status >= 200 && xhr.status < 300) {
      var response = xhr.responseText;
      var parser = new window.DOMParser();
      var data = parser.parseFromString(response, "text/xml");
      var items = Array.from(data.querySelectorAll("item"));
      var output = '';
      forEach(items, function(index, item) {
        if (index <= limit) {
          var ilink = item.querySelector("link").innerHTML;
          var title = item.querySelector("title").innerHTML;
          var descr = item.querySelector("description").innerHTML;
          var thumb = item.getElementsByTagName("media:thumbnail")[0].getAttribute("url");
          //console.log(item);
          output +=
          '<div class="ce-blog-slider-well">' +
             '<div class = "ce-blog-thumb">' +
              '<img class="blog-post-img" src="' + thumb + '" alt="Veterans Center Sign">' +
            '</div>' +  
            '<div class = "ce-blog-header">' +
              '<a href="' + ilink + '" target="_blank" rel="noopener">' + strip_tags(title) + '</a>' +
            '</div>' +
            '<div class ="ce-blog-descr">' + strip_tags(descr) + '</div>' +
          '</div>';
        }
      });
      var d1 = document.getElementById('wp-blog-posts');
      d1.insertAdjacentHTML("beforeend", output);  
    }
  };
  xhr.open('GET', url);
  xhr.send();
}

forEach(feeds, function(index, feed) {
  get_rss(proxy + encodeURIComponent(feed));
});
<div class="ce-blog-slider" id="wp-blog-posts"></div>

Upvotes: 1

Related Questions