Доступ к <link>значению в XML с помощью Javascript - PullRequest
Новая
       17

Доступ к <link>значению в XML с помощью Javascript

0 голосов
/ 05 февраля 2019

Я использую Ajax / jQuery для извлечения некоторого контента из RSS-канала, но, похоже, не удается прочитать содержимое узла XML с именем 'link'.

Вот упрощенныйверсия 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>

И код, который я использую: 

    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();

Вы увидите, что я пытаюсь добавить каждый «элемент» к объекту, исохраняя их внутри массива 'posts'.«Title» и «pubDate» хранятся нормально, но «link» - нет.

Фактический рассматриваемый RSS-канал содержит огромное количество дополнительных данных, которые я могу прочитать, кроме узлов «link»,Какие-либо предположения, почему узлы, называемые ссылками, будут отличаться от всех остальных?

1 Ответ

0 голосов
/ 05 февраля 2019

Проблема в том, что вы пытаетесь проанализировать XML как HTML.Объект <link> в HTML - это встроенный элемент, а не блок уровня, поэтому у него нет свойства textContent для чтения jQuery, следовательно, вывод пустой.

Чтобы исправить это, сначала прочитайте XMLиспользуя $.parseXML(), , затем поместите его в объект jQuery, который вы можете пройти.

Также есть пара вещей, на которые стоит обратить внимание.Во-первых, вам нужно будет удалить узел </xml> в конце вывода XML, поскольку он недопустим и вызовет ошибку при запуске через $.parseXML.Во-вторых, вы можете использовать map() для создания массива вместо ручного вызова push() для массива, и вы можете просто вернуть определение объекта непосредственно из этого.Попробуйте это: 

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>

Наконец, вы используете довольно странное сочетание JS и jQuery.Я бы предложил пойти с тем или другим.Таким образом, вот полная реализация jQuery с включенным AJAX-запросом: 

$.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...
  }
});
...