【发布时间】：2016-12-20 20:49:46
【问题描述】：
我想以表格格式显示 XML 数据，下面是我编写的代码，但它不起作用。来自 XML 的数据被分支出来，因此之前没有完全出现 - 但在我当前的代码中没有返回任何内容。
<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
th{
background-color:#BBB;
}
</style>
<body>
<p>Sample para component</p>
<button type="button" onclick="loadDoc()">Click me</button>
<br><br>
<table id="myTable"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET", "sample.xml", true);
xhttp.send();
}
function myFunction(xml) {
var a, b, c, d, e, f;
function smartValue1(root, tag) {
return (root.getElementsByTagName("InstructingOrgName").length &&
root.getElementsByTagName("InstructingOrgName")[0].childNodes.length &&
root.getElementsByTagName("InstructingOrgName")[0].childNodes[0].nodeValue
) || '';
}
function smartValue2(root, tag) {
return (root.getElementsByTagName("InstructingOrgCode").length &&
root.getElementsByTagName("InstructingOrgCode")[0].childNodes.length &&
root.getElementsByTagName("InstructingOrgCode")[0].childNodes[0].nodeValue
) || '';
}
function smartValue3(root, tag) {
for (c = 0; c <= document.getElementsByTagName("PortfolioName").length; c++) {
return (root.getElementsByTagName("PortfolioName").length &&
root.getElementsByTagName("PortfolioName")[c].childNodes.length &&
root.getElementsByTagName("PortfolioName")[c].childNodes[c].nodeValue
) || '';
}
}
function smartValue4(root, tag) {
for (d = 0; d <= document.getElementsByTagName("PortfolioCode").length; d++) {
return (root.getElementsByTagName("PortfolioCode").length &&
root.getElementsByTagName("PortfolioCode")[d].childNodes.length &&
root.getElementsByTagName("PortfolioCode")[d].childNodes[d].nodeValue
) || '';
}
}
function smartValue5(root, tag) {
for (e = 0; e <= document.getElementsByTagName("FundName").length; e++) {
return (root.getElementsByTagName("FundName").length &&
root.getElementsByTagName("FundName")[e].childNodes.length &&
root.getElementsByTagName("FundName")[e].childNodes[e].nodeValue
) || '';
}
}
function smartValue6(root, tag) {
for (f = 0; f <= document.getElementsByTagName("FundCode").length; f++) {
return (root.getElementsByTagName("FundCode").length &&
root.getElementsByTagName("FundCode")[f].childNodes.length &&
root.getElementsByTagName("FundCode")[f].childNodes[f].nodeValue
) || '';
}
}
var i;
var xmlDoc = xml.responseXML;
var xmlDoc1 = xml.responseXML;
var xmlDoc2 = xml.responseXML;
var table = "<tr><th>Instructing Org</th><th>Portfolio</th><th>Fund</th></tr>";
var x = xmlDoc.getElementsByTagName("ClientInvestmentInstruction");
var y = xmlDoc1.getElementsByTagName("Portfolio");
var z = xmlDoc2.getElementsByTagName("Fund");
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
smartValue1(x[i], "InstructingOrgName") +
" (" +
smartValue2(x[i], "InstructingOrgCode") +
") </td><td>" +
for (a = 0; a < y.length; y++) {
smartValue3(x[i], "PortfolioName") +
"  (" +
smartValue4(x[i], "PortfolioCode") +
") </td><td> " +
for (b = 0; b < z.length; z++) {
smartValue5(x[i], "FundName") +
" (" +
smartValue6(x[i], "FundCode") +
") </td></tr>"
}
}
}
document.getElementById("myTable").innerHTML = table;
}
</script>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<ClientInvestmentInstructionList>
<ClientInvestmentInstruction>
<InstructingOrgName>Sample A</InstructingOrgName>
<InstructingOrgCode>Sample A code</InstructingOrgCode>
<PortfolioList>
<Portfolio>
<PortfolioName>Sample A Child</PortfolioName>
<PortfolioCode>Sample A Child code</PortfolioCode>
<AuthorizeFundList>
<Fund>
<FundName>Sample A Penultimate</FundName>
<FundCode>Sample A Penultimate code</FundCode>
</Fund>
<Fund>
<FundName>Sample A1 Penultimate</FundName>
<FundCode>Sample A1 Penultimate code</FundCode>
</Fund>
</AuthorizeFundList>
</Portfolio>
<Portfolio>
<PortfolioName>Sample B Child</PortfolioName>
<PortfolioCode>Sample B Child code</PortfolioCode>
<AuthorizeFundList>
<Fund>
<FundName>Sample B Penultimate</FundName>
<FundCode>Sample B Penultimate code</FundCode>
</Fund>
<Fund>
<FundName>Sample B1 Penultimate</FundName>
<FundCode>Sample B1 Penultimate code</FundCode>
</Fund>
<Fund>
<FundName>Sample B2 Penultimate</FundName>
<FundCode>Sample B2 Penultimate code</FundCode>
</Fund>
</AuthorizeFundList>
</Portfolio>
<Portfolio>
<PortfolioName>Sample C Child</PortfolioName>
<PortfolioCode>Sample C Child code</PortfolioCode>
</Portfolio>
</PortfolioList>
</ClientInvestmentInstruction>
<ClientInvestmentInstruction>
<InstructingOrgName>Sample part 2</InstructingOrgName>
<InstructingOrgCode>Sample part 2 code</InstructingOrgCode>
<PortfolioList>
<Portfolio>
<PortfolioName>Sample part 2 child</PortfolioName>
<PortfolioCode>Sample part 2 child code</PortfolioCode>
<AuthorizeFundList>
<Fund>
<FundName>Sample part 2 penultimate</FundName>
<FundCode>Sample part 2 penultimate code</FundCode>
</Fund>
<Fund>
<FundName>Sample part 2a penultimate</FundName>
<FundCode>Sample part 2a penultimate code</FundCode>
</Fund>
</AuthorizeFundList>
</Portfolio>
<Portfolio>
<PortfolioName>Sample part 3 child</PortfolioName>
<PortfolioCode>Sample part 3 child code</PortfolioCode>
<AuthorizeFundList>
<Fund>
<FundName>Sample part 3 penultimate</FundName>
<FundCode>Sample part 3 penultimate code</FundCode>
</Fund>
<Fund>
<FundName>Sample part 3a penultimate</FundName>
<FundCode>Sample part 3a penultimate code</FundCode>
</Fund>
</AuthorizeFundList>
</Portfolio>
</PortfolioList>
</ClientInvestmentInstruction>
</ClientInvestmentInstructionList>
【问题讨论】：
-
代码的后面部分包含我在代码中使用的 XML 内容。
-
@nicematt — 您将 XML 声明（可选）与 Content-Type 响应标头混淆了。
-
@Quentin 我还没有看到操作中声明的 XML ......我总是很笨 >>
-
感谢它有 标头。知道如何在不丢失任何条目的情况下显示分支的 XML 数据。与在 SmartValue 函数中使用 for 之前一样，我使用的是精确位置（例如 [0]），但这仅返回第一个条目而不是整个分支数据。
-
在将 for 循环用于最后一个 for 函数以及稍后尝试在脚本中传递值时，我在 smartValue 函数中遇到了问题。在调试期间，我无法导航到问题。我想要的最终输出是显示一个包含 XML 文件中所有值的表。希望这会有所帮助。
标签： javascript html ajax xml xml-parsing