从XML检索的数据显示为Object对象

时间:2019-06-07 10:02:11

标签: javascript jquery html xml

我具有以下XML结构:

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

以及以下获取和显示XML的方法”

$.ajax({
  url:'feed.xml',
  dataType:'xml',
  type:'GET', 
  success: xmlParser,
});

function xmlParser(xml){
  $(xml).find("item").each(function(){
    $("#container").append('<div class="test">' + $(this).find("title") + '</div>');   
  });
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <!-- print results here -->
</div>

但是,在页面上,它打印[Object object]六次(因为有六个item's)。不确定为什么?

2 个答案:

答案 0 :(得分:0)

$(this).find("title")返回一个jQuery对象。我假设您希望显示内部文本。您可以使用jQuery text method

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

var $container = $("#container");
var xml = "<items><item><title>title 1</title><description>description 1</description></item><item><title>title 2</title><description>description 2</description></item><item><title>title 3</title><description>description 3</description></item></items>";

xmlParser(xml);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <!-- print results here -->
</div>

答案 1 :(得分:0)

这是因为+运算符隐式调用toString上的$(this).find("title")。解决此问题的最简单方法是使用逗号运算符。

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

var data = "<item><title>title</title><description>description</description></item>";

xmlParser(xml);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id="container"></div>