使用 javascript 将父属性的 XML 数据获取到表中

【问题标题】：Getting XML Data of parent attributes into tables using javascript使用 javascript 将父属性的 XML 数据获取到表中
【发布时间】：2016-11-08 17:34:58
【问题描述】：

我需要使用 javascript 从 xml 文件中获取数据到 html 表中。

我已经浏览了 W3School 示例 http://www.w3schools.com/xml/tryit.asp?filename=tryxml_display_table

在我的 xml 文件中，子属性和父属性可能相同，但我只想显示父属性

<resource>
  <parent>
     <item>item1</item>
     <attribute>
       <item>subitem</item>
     </attribute>
       <item>subitem</item>
    <description>
    </description>
  </parent>
</resource>

在上面的示例中，我有两个项目标签，一个是父项，其他是子项。我只想获取父标签值

这是我的html代码

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body onload="loadXMLDoc();">


<br><br>
<table id="demo"></table>

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "newXMLfile.xml", true);
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Name</th></tr>";
  var x = xmlDoc.getElementsByTagName("parent");
  for (i = 0; i <x.length; i++) {
    table += "<tr><td>" +
    x[i].getElementsByTagName("item")[0].childNodes[0].nodeValue +
    "</td>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

但这里我只得到子项标签值。

【问题讨论】：

你需要什么结果？名称 subitem?
只想打印父属性值 value1

标签： javascript html xml

【解决方案1】：

如果我理解正确，<item> 之后的text 不是subitem。它的item。

如果您只需要<parent> 中的<item>s，不包括<attribute> 中的<attribute>：

从您的getByTagName() 中删除childNodes[0]。它打印<parent> 内所有<item> 标签的第一个子标签。
添加一个简单的检查以查看<item> 的parentNode 是否为<parent>。然后打印出来。

类似：

//Get every <item> within <parent>
var item = x[i].getElementsByTagName('item');
//for each item
for(... ){
  if(item[i].parentNode.name == "parent"){
    table += "<tr><td>" +
    item[i].nodeValue +
    "</td>";
  }
}

我不完全确定parentNode.name 怎么样。这只是一个想法。

Here 是 MSDN 文档。

【讨论】：

感谢您的回答，让我检查一次
获取空值

【解决方案2】：

如果我理解正确，请尝试下一个代码。

var testXML=`<resource>
  <parent>
     <item>item1</item>
     <attribute>
       <item>attribute subitem</item>
     </attribute>
       <item> subitem</item>
    <description>
    </description>
  </parent>
</resource>`;

function myFunction(xml) {
  var table="<tr><th>Name</th></tr>";
  var parentNodes = $(xml).find("parent");
  for (var i = 0; i <parentNodes.length; i++) {
    table += "<tr><td>" +
    $(parentNodes[i]).find("attribute item").text() +
    "</td>";
  }
  document.getElementById("demo").innerHTML = table;
}

myFunction(testXML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo"></table>

【讨论】：