Javascript 将 xml 数据添加到 UL 列表

Question

在查询中，我有一些关于响应变量的 xml 数据。

数据如下所示:

<list type="cat">
  <instance id="4" name="somename" />
  <instance id="7" name="someo_there_name" />
</list>

我还准备了一个 UL，我需要一个在 ul 中附加 id 和名称的列表

<ul id="thelist"></ul>

我该怎么做？

Answer 1

要实现这一点，您可以使用 map() 遍历 instance 节点，然后将包含 li 元素的 HTML 添加到结果数组，然后将其全部附加到 ul。试试这个:

var xml = '<list type="cat"><instance id="4" name="somename" /><instance id="7" name="someo_there_name" /></list>';

var html = $(xml).find('instance').map(function(){
  return `<li id=${$(this).attr('id')}">${$(this).attr('name')}</li>`;
}).get();
$('#thelist').append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="thelist"></ul>