Получение и отображение данных XML

Question

У меня есть XML-файл со следующей структурой:

<item>
  <title>title</title>
  <description>description</description>
</item>

С моим текущим ajax-запросом на странице не печатаются результаты, не знаете почему?

$.ajax({
  url: 'feed.xml',
  dataType: 'xml',
  type: 'GET',
  success: xmlParser,
  success: function(d) {
    console.log($(d).find('item').length || 0);
  }
});


function xmlParser(xml) {
  $(xml).find("item").each(function() {
    $("#container").append('<div class="test">' + $(this).find("title") + '</div>');
    $(".item").fadeIn(1000);
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <!-- print results here -->
</div>

С учетом вышесказанного, container div пуст?

Answer 1

Вы можете проанализировать содержимое xml с помощью jQuery.ParseXML и попробовать использовать функцию .text() для чтения данных внутри элемента. Для образца:

function xmlParser(content) {
  var xmlDoc = $.parseXML(content);
  $(xmlDoc).find("item").each(function() {
    $("#container").append('<div class="test">' + $(this).find("title").text() + '</div>');
    $(".item").fadeIn(1000);
  });
}

См. Рабочий пример: https://jsbin.com/xayazoxela/edit?html,js,output (без запроса ajax, потому что у нас нет файла в этой области).

Вы также определили функцию success в своем запросе ajax дважды. Исправьте это (если вы хотите вызвать оба кода) для образца:

$.ajax({
  url: 'feed.xml',
  dataType: 'xml',
  type: 'GET',
  success: function(d) {
     xmlParser(d);
     console.log($(d).find('item').length || 0);
  } 
});