如何从XML创建多维数组表？

I am trying to create a 2 D array from XML and render it into the HTML page, as you can see on the first image, I managed to extract the data from XML file. but the table values are duplicated. how do I avoid that? any Suggestion is helped. thanks

我正在尝试从XML创建一个2D数组并将其呈现到HTML页面中，正如您在第一个图像上看到的那样，我设法从XML文件中提取数据。但表值是重复的。我该如何避免？任何建议都有帮助。谢谢

for (var y = 0; y < 10; y++) {
    table_summary += "<tr><td style='color:blue'>" + s[y].getElementsByTagName("_portfolioName")[0].childNodes[0].nodeValue + "</td></tr>";

    for (var i = 0; i < x.length; i++) {

        table_summary += "<th></th><th style='color:orangered'>" + x[i].getElementsByTagName("_date")[0].childNodes[0].nodeValue + "</th>";
        var row = x[i];

        var MtmBefore = row.getElementsByTagName("MtmBefore")[0].childNodes[0].nodeValue;
        var MtmAfter = row.getElementsByTagName("MtmAfter")[0].childNodes[0].nodeValue;
        var ChangeMaturingTrades = row.getElementsByTagName("ChangeMaturingTrades")[0].childNodes[0].nodeValue;
        var ChangeNewTrades = row.getElementsByTagName("ChangeNewTrades")[0].childNodes[0].nodeValue;
        var ChangeCashflow = row.getElementsByTagName("ChangeCashflow")[0].childNodes[0].nodeValue;
        var ChangeTheta = row.getElementsByTagName("ChangeTheta")[0].childNodes[0].nodeValue;
        var ChangePosition = row.getElementsByTagName("ChangePosition")[0].childNodes[0].nodeValue;
        var ChangeMarket = row.getElementsByTagName("ChangeMarket")[0].childNodes[0].nodeValue;
        var ChangeOther = row.getElementsByTagName("ChangeOther")[0].childNodes[0].nodeValue;

        table_summary += "<tr><th>Mtm Before</th><td>" + MtmBefore + "</td></tr>" +
            "<th>Mtm After</th><td>" + MtmAfter + "</td></tr>" +
            "<th>Change Maturing Trades</th><td>" + ChangeMaturingTrades + "</td></tr>" +
            "</th><th>Change New Trades</th><td>" + ChangeNewTrades.slice(0, (ChangeNewTrades.indexOf(".")) + 3) + "</td></tr>" +
            "<tr><th>Change Cashflow</th><td>" + ChangeCashflow + "</td></tr>" +
            "<tr><th>Change Theta</th><td>" + ChangeTheta.slice(0, (ChangeTheta.indexOf(".")) + 3) + "</td></tr>" +
            "<tr><th>Change Position</th><td>" + ChangePosition.slice(0, (ChangePosition.indexOf(".")) + 3) + "</td></tr>" +
            "<tr><th>Change Market</th><td>" + ChangeMarket.slice(0, (ChangeMarket.indexOf(".")) + 3) + "</td></tr>" +
            "<tr><th>Change Other</th><td>" + ChangeOther.slice(0, (ChangeOther.indexOf(".")) + 3) + "</td></tr>";


        }
    }

XML file

XML文件

what I want to achieve

我想要实现的目标

2 个解决方案

#1

Consider XSLT, the special-purpose lanaguage, designed to transform XML files to other XML, HTML, even CSV/TXT formats. Specifically with the Muenchian Grouping, you can pivot the data to your "2D" needs by indexing on element name of each child node of <_detail> since they will become each html table's rows.

考虑XSLT，这是一种特殊用途的语言，旨在将XML文件转换为其他XML，HTML甚至CSV / TXT格式。特别是使用Muenchian Grouping，您可以通过索引<_detail>的每个子节点的元素名称来将数据转换为“2D”需求，因为它们将成为每个html表的行。

Javascript can run XSLT as do most general-purpose languages (Java, C#, Perl, PHP, Python, VB) or you can call it as a processing instruction in XML to render as HTML via the browser:

Javascript可以像大多数通用语言（Java，C＃，Perl，PHP，Python，VB）一样运行XSLT，或者您可以将其称为XML中的处理指令，以通过浏览器呈现为HTML：

<?xml-stylesheet type="text/xsl" href="myxsl.xsl"?>

While your posted XML example is not quite exactly what your attempt shows, below uses posted example that may apply to your actual source XML.

虽然您发布的XML示例并不完全符合您的尝试，但下面使用可能适用于您的实际源XML的已发布示例。

XSLT

XSLT

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output indent="yes" method="html"/>
  <xsl:strip-space elements="*"/>

  <xsl:key name="elemid" match="_detail/*[local-name()!='alerts' and local-name()!='attributionResults']" use="local-name()" />

  <xsl:template match="/DecompExtractSummary">
    <html>
        <body>
            <table>
                <xsl:apply-templates select="_dateSets"/>
            </table>
        </body>
    </html>
  </xsl:template>

   <xsl:template match="_dateSets|DecompExtractSummaryDateSet">
        <xsl:apply-templates select="DecompExtractSummaryDateSet|_portfolioSummaries"/>
    </xsl:template>   

   <xsl:template match="_portfolioSummaries">
        <xsl:apply-templates select="DecompExtractSummaryDateSetDetail"/>
    </xsl:template>   

   <xsl:template match="DecompExtractSummaryDateSetDetail">
        <xsl:apply-templates select="_detail/*[generate-id() = generate-id(key('elemid', local-name()))]"/>
    </xsl:template>     

  <xsl:template match="_detail/*[local-name()!='alerts' and local-name()!='attributionResults']"> 
    <tr>
        <td><xsl:value-of select="local-name()"/></td>
        <xsl:for-each select="key('elemid', local-name())">         
            <td><xsl:value-of select="."/></td>
        </xsl:for-each>         
    </tr>
  </xsl:template>

</xsl:stylesheet>

HTML

HTML

<html><body><table>
<tr>
<td>calcDate1</td>
<td>2017-09-19T00:00:00</td>
<td>2017-09-19T00:00:00</td>
<td>2017-09-19T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-19T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-19T00:00:00</td>
<td>2017-09-19T00:00:00</td>
<td>2017-09-19T00:00:00</td>
<td>2017-09-19T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
</tr>
<tr>
<td>calcDate2</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>2017-09-25T00:00:00</td>
</tr>
<tr>
<td>currency</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
</tr>
<tr>
<td>exchangeRate</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>MtmBefore</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-23.3</td>
<td>-4.5</td>
<td>-2.4</td>
<td>0</td>
<td>3.3</td>
<td>0</td>
<td>1199.22</td>
<td>-99.1</td>
<td>-22.22</td>
<td>-99.22</td>
<td>-22330.22</td>
<td>-3</td>
<td>-970</td>
<td>-22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-23</td>
<td>-1018</td>
<td>-45</td>
<td>-790</td>
<td>-44</td>
<td>-834</td>
<td>0</td>
<td>-1050</td>
<td>0</td>
<td>-105</td>
<td>-2.9</td>
<td>-84</td>
<td>-2</td>
</tr>
<tr>
<td>MtmAfter</td>
<td>-12.23</td>
<td>-4.23</td>
<td>-45.56</td>
<td>0</td>
<td>23.23</td>
<td>0</td>
<td>23.2</td>
<td>-23.23</td>
<td>-23.23</td>
<td>-23.23</td>
<td>-34.34</td>
<td>-3.2</td>
<td>-4.33</td>
<td>-224.22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-231.3</td>
<td>-22.3</td>
<td>-22.22</td>
<td>-22.3</td>
<td>-44.3</td>
<td>-8630</td>
<td>0</td>
<td>-105</td>
<td>0</td>
<td>-105</td>
<td>-264.9</td>
<td>-8804</td>
<td>-26.9</td>
<td>-36089</td>
<td>-4030</td>
<td>-7643</td>
<td>-78</td>
<td>650</td>
<td>0</td>
<td>65</td>
<td>0</td>
<td>-765</td>
<td>-7</td>
</tr>
<tr>
<td>ChangeMaturingTrades</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>2.4</td>
<td>12.22</td>
<td>0</td>
<td>3.22</td>
<td>0</td>
<td>22.22</td>
<td>-99.3</td>
<td>22.3</td>
<td>-22.22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-23</td>
<td>-456</td>
<td>-45</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-29</td>
<td>-264.9</td>
<td>-2</td>
</tr>
<tr>
<td>ChangeNewTrades</td>
<td>-23.23</td>
<td>-23.232</td>
<td>-34.35</td>
<td>0</td>
<td>23.23</td>
<td>0</td>
<td>23.23</td>
<td>-23.23</td>
<td>-232.23</td>
<td>-23.23</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-224.22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-231.4</td>
<td>-456.22</td>
<td>-22.22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-105</td>
<td>0</td>
<td>-105</td>
<td>-264.9</td>
<td>-131</td>
<td>-64.9</td>
<td>900</td>
<td>0</td>
<td>900</td>
<td>-78</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>82</td>
<td>-7</td>
</tr>
<tr>
<td>ChangeCashflow</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>ChangeTheta</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-3.34</td>
<td>388.1</td>
<td>-33.22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-26.22</td>
<td>0</td>
<td>-101.2</td>
<td>-224.3</td>
<td>-325</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-32</td>
<td>0</td>
<td>65</td>
<td>-67</td>
<td>-1</td>
<td>0</td>
<td>32.876712328757662</td>
<td>0</td>
<td>32</td>
<td>0</td>
<td>18</td>
<td>0</td>
</tr>
<tr>
<td>ChangePosition</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>ChangeMarket</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-3.3</td>
<td>22.3</td>
<td>-3.22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-5098.22</td>
<td>0</td>
<td>-22.2</td>
<td>2.22</td>
<td>-7688</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-7687</td>
<td>0</td>
<td>3437</td>
<td>-3481</td>
<td>-43</td>
<td>0</td>
<td>171</td>
<td>0</td>
<td>171</td>
<td>0</td>
<td>12</td>
<td>0</td>
</tr>
<tr>
<td>ChangeOther</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>3.34</td>
<td>-2.23</td>
<td>22.3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>22.22</td>
<td>0</td>
<td>-8.22</td>
<td>22</td>
<td>21</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>213</td>
<td>0</td>
<td>-10</td>
<td>-46</td>
<td>-149</td>
<td>0</td>
<td>-5</td>
<td>0</td>
<td>-5</td>
<td>0</td>
<td>-15</td>
<td>0</td>
</tr>
</table></body></html>

#2

I've taken from this answer https://*.com/a/8412989/2768318 the best practice to parse an xml String.

It's a JQUERY method to easily build javascript object from XML.
This is your XML formatted: https://pastebin.com/yySDn4QT (there were missing several tags).

我已经从这个答案https://*.com/a/8412989/2768318中解析了解析xml字符串的最佳实践。这是一种从XML轻松构建javascript对象的JQUERY方法。这是您的XML格式：https：//pastebin.com/yySDn4QT（缺少几个标签）。

Here is the jfiddle I've built: https://jsfiddle.net/rhneLsgL/ (update : https://jsfiddle.net/rhneLsgL/1/ )

这是我建立的jfiddle：https：//jsfiddle.net/rhneLsgL/（更新：https：//jsfiddle.net/rhneLsgL/1/）

var xml = $.parseXML("<ExtractSumm....");
// ....
$("#btn1").click(function(){
    $("#test1").text(function(i, origText){
        //debugger;
        return xml.documentElement;
    });
});

The documentElement is a javascript object with all useful function to pase an XML eg: you can access child elements, text, know how long is the list, how much element are for each type etc..

documentElement是一个javascript对象，具有用于设置XML的所有有用功能，例如：您可以访问子元素，文本，知道列表有多长，每种类型有多少元素等等。

Starting from this, you can build easily your table, without using for each loops.

从这开始，您可以轻松构建表，而无需使用每个循环。

EDIT An example is in this fiddle: https://jsfiddle.net/rhneLsgL/5/ I've splitted the implementation in two parts:

Extract the Data as we need it from the existing XML
从现有XML中提取数据
Write the table.
写表。

I swear the table is in the form that you need.

我发誓桌子是你需要的形式。

Edit2: I've added my solution to this to my personal Js Fiddle account to not lose it: https://jsfiddle.net/GaetanoPiazzolla/u40g8whx/

#1