以表格格式显示XML和JSON中的数据 [英] Displaying data from XML and JSON in table format
本文介绍了以表格格式显示XML和JSON中的数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望以表格的形式显示我们从XML和JSON文件中检索的数据： https://jsfiddle.net/daksh844/hrw85ck5/
I want to display data that we retrieve from XML and JSON files in the form of a table as featured on this fiddle: https://jsfiddle.net/daksh844/hrw85ck5/
布局应与小提琴上的布局完全相同。我坚持在表格中获得这种布局。请分享两种情况（XML和JSON）的见解。
The layout should be exactly the same as on the fiddle. I'm stuck on getting this layout in a table. Please share the insight for both cases (XML and JSON).
我尝试过这个 https://jsfiddle.net/daksh844/jgmw6we4/4/ 但无法以完全相同的布局显示数据。
I've tried working on this https://jsfiddle.net/daksh844/jgmw6we4/4/ but unable to display the data in exact same layout.
数据如下：
XML：
<ClientInvestmentInstructionList>
<ClientInvestmentInstruction>
<InstructingOrgName>Sample</InstructingOrgName>
<InstructingOrgCode>A1</InstructingOrgCode>
<PortfolioList>
<Portfolio>
<PortfolioName>Sample A-1</PortfolioName>
<PortfolioCode>Child</PortfolioCode>
<AuthorizeFundList>
<Fund>
<FundName>Sample A-1</FundName>
<FundCode>Sub-child</FundCode>
</Fund>
<Fund>
<FundName>Sample A-1</FundName>
<FundCode>Sub-child 2</FundCode>
</Fund>
</AuthorizeFundList>
</Portfolio>
<Portfolio>
<PortfolioName>Sample A-1</PortfolioName>
<PortfolioCode>Child 2</PortfolioCode>
<AuthorizeFundList>
<Fund>
<FundName>Sample A-1</FundName>
<FundCode>Sub-child 3</FundCode>
</Fund>
<Fund>
<FundName>Sample A-1</FundName>
<FundCode>Sub-child 4</FundCode>
</Fund><Fund>
<FundName>Sample A-1</FundName>
<FundCode>Sub-child 5</FundCode>
</Fund>
</AuthorizeFundList>
</Portfolio>
<Portfolio>
<PortfolioName>Sample A-1</PortfolioName>
<PortfolioCode>Child 3</PortfolioCode>
</Portfolio>
</PortfolioList>
</ClientInvestmentInstruction>
<ClientInvestmentInstruction>
<InstructingOrgName>Sample</InstructingOrgName>
<InstructingOrgCode>A-2</InstructingOrgCode>
<PortfolioList>
<Portfolio>
<PortfolioName>Sample A-2</PortfolioName>
<PortfolioCode>Child</PortfolioCode>
<AuthorizeFundList>
<Fund>
<FundName>Sample A-2</FundName>
<FundCode>Sub-child</FundCode>
</Fund>
<Fund>
<FundName>Sample A-2</FundName>
<FundCode>Sub-child 2</FundCode>
</Fund>
</AuthorizeFundList>
</Portfolio>
<Portfolio>
<PortfolioName>Sample A-2</PortfolioName>
<PortfolioCode>Child 2</PortfolioCode>
<AuthorizeFundList>
<Fund>
<FundName>Sample A-2</FundName>
<FundCode>Sub-child 3</FundCode>
</Fund>
<Fund>
<FundName>Sample A-2</FundName>
<FundCode>Sub-child 4</FundCode>
</Fund>
</AuthorizeFundList>
</Portfolio>
</PortfolioList>
</ClientInvestmentInstruction>
</ClientInvestmentInstructionList>
JSON：
{"ClientInvestmentInstructionList": {
"ClientInvestmentInstruction": [
{
"InstructingOrgName": "Sample",
"InstructingOrgCode": "A1",
"PortfolioList": {
"Portfolio": [
{
"PortfolioName": "Sample A-1",
"PortfolioCode": "Child",
"AuthorizeFundList": {
"Fund": [
{
"FundName": "Sample A-1",
"FundCode": "Sub-child"
},
{
"FundName": "Sample A-1",
"FundCode": "Sub-child 2"
}
]
}
},
{
"PortfolioName": "Sample A-1",
"PortfolioCode": "Child 2",
"AuthorizeFundList": {
"Fund": [
{
"FundName": "Sample A-1",
"FundCode": "Sub-child 3"
},
{
"FundName": "Sample A-1",
"FundCode": "Sub-child 4"
},
{
"FundName": "Sample A-1",
"FundCode": "Sub-child 5"
}
]
}
},
{
"PortfolioName": "Sample A-1",
"PortfolioCode": "Child 3"
}
]
}
},
{
"InstructingOrgName": "Sample",
"InstructingOrgCode": "A-2",
"PortfolioList": {
"Portfolio": [
{
"PortfolioName": "Sample A-2",
"PortfolioCode": "Child",
"AuthorizeFundList": {
"Fund": [
{
"FundName": "Sample A-2",
"FundCode": "Sub-child"
},
{
"FundName": "Sample A-2",
"FundCode": "Sub-child 2"
}
]
}
},
{
"PortfolioName": "Sample A-2",
"PortfolioCode": "Child 2",
"AuthorizeFundList": {
"Fund": [
{
"FundName": "Sample A-2",
"FundCode": "Sub-child 3"
},
{
"FundName": "Sample A-2",
"FundCode": "Sub-child 4"
}
]
}
}
]
}
}
]
}
推荐答案
怎么样？
/* XML parsed structure, equivalent of xhr.responseXML */
var structure = new DOMParser().parseFromString('<ClientInvestmentInstructionList>\
<ClientInvestmentInstruction>\
<InstructingOrgName>Sample</InstructingOrgName>\
<InstructingOrgCode>A1</InstructingOrgCode>\
<PortfolioList>\
<Portfolio>\
<PortfolioName>Sample A-1</PortfolioName>\
<PortfolioCode>Child</PortfolioCode>\
<AuthorizeFundList>\
<Fund>\
<FundName>Sample A-1</FundName>\
<FundCode>Sub-child</FundCode>\
</Fund>\
<Fund>\
<FundName>Sample A-1</FundName>\
<FundCode>Sub-child 2</FundCode>\
</Fund>\
</AuthorizeFundList>\
</Portfolio>\
\
<Portfolio>\
<PortfolioName>Sample A-1</PortfolioName>\
<PortfolioCode>Child 2</PortfolioCode>\
<AuthorizeFundList>\
<Fund>\
<FundName>Sample A-1</FundName>\
<FundCode>Sub-child 3</FundCode>\
</Fund>\
<Fund>\
<FundName>Sample A-1</FundName>\
<FundCode>Sub-child 4</FundCode>\
</Fund><Fund>\
<FundName>Sample A-1</FundName>\
<FundCode>Sub-child 5</FundCode>\
</Fund>\
</AuthorizeFundList>\
</Portfolio>\
<Portfolio>\
<PortfolioName>Sample A-1</PortfolioName>\
<PortfolioCode>Child 3</PortfolioCode>\
</Portfolio>\
</PortfolioList>\
</ClientInvestmentInstruction>\
\
<ClientInvestmentInstruction>\
<InstructingOrgName>Sample</InstructingOrgName>\
<InstructingOrgCode>A-2</InstructingOrgCode>\
<PortfolioList>\
<Portfolio>\
<PortfolioName>Sample A-2</PortfolioName>\
<PortfolioCode>Child</PortfolioCode>\
<AuthorizeFundList>\
<Fund>\
<FundName>Sample A-2</FundName>\
<FundCode>Sub-child</FundCode>\
</Fund>\
<Fund>\
<FundName>Sample A-2</FundName>\
<FundCode>Sub-child 2</FundCode>\
</Fund>\
</AuthorizeFundList>\
</Portfolio>\
<Portfolio>\
<PortfolioName>Sample A-2</PortfolioName>\
<PortfolioCode>Child 2</PortfolioCode>\
<AuthorizeFundList>\
<Fund>\
<FundName>Sample A-2</FundName>\
<FundCode>Sub-child 3</FundCode>\
</Fund>\
<Fund>\
<FundName>Sample A-2</FundName>\
<FundCode>Sub-child 4</FundCode>\
</Fund>\
</AuthorizeFundList>\
</Portfolio>\
</PortfolioList>\
</ClientInvestmentInstruction>\
</ClientInvestmentInstructionList>', "text/xml");
/* Get text of XML node */
function getText(node) {
return node.childNodes[0].nodeValue;
}
/* Initial HTML buffer */
var htmlBuffer = "<table>\
<thead><tr>\
<td>Sample A</td>\
<td>Sample B</td> \
<td>Sample C</td>\
</tr></thead><tbody>";
/* Iterate each client investment instruction */
for (var instruction of structure.getElementsByTagName('ClientInvestmentInstruction')) {
var headerDeclared = false;
/* Iterate each portfolio */
for (var portfolio of instruction.getElementsByTagName('Portfolio')) {
htmlBuffer += "<tr>";
/* Declare the Sample A data */
htmlBuffer += "<td>";
/*
* If InstructingOrgName and code aren't declared,
* declare both then
*/
if (!headerDeclared) {
htmlBuffer += getText(instruction.getElementsByTagName('InstructingOrgName')[0]) + " " +
getText(instruction.getElementsByTagName('InstructingOrgCode')[0]);
headerDeclared = true;
}
htmlBuffer += "</td>";
/* Declare Sample B data */
htmlBuffer += "<td>" + getText(portfolio.getElementsByTagName('PortfolioName')[0]) + " " +
getText(portfolio.getElementsByTagName('PortfolioCode')[0]) +
"</td>";
/* Get funds */
var FundList = portfolio.getElementsByTagName('Fund');
/* Check if any funds exist */
if (FundList.length) {
/* Iterate each fund */
for (var i = 0, fund; fund = FundList[i]; i++) {
/* Declare fund in Sample C data */
htmlBuffer += (i > 0 ? "</tr><tr><td></td><td></td>" : "") + "<td>"
htmlBuffer += getText(fund.getElementsByTagName('FundName')[0]) + " " +
getText(fund.getElementsByTagName('FundCode')[0]);
htmlBuffer += "</td>";
}
}
/* Leave Sample C empty */
else
htmlBuffer += "<td></td>";
/* Portfolio/fund end */
htmlBuffer += "</tr>";
}
htmlBuffer += "<tr><td></td><td></td><td></td></tr>";
}
htmlBuffer += "</tbody>";
// For tests
document.body.innerHTML = htmlBuffer;
table, thead, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
thead {
background-color: #BBB;
}
这篇关于以表格格式显示XML和JSON中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
