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

时间：2017-09-28 14:09:18

标签： javascript ajax xml

我正在尝试从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

enter image description here

我想要实现的目标 enter image description here

2 个答案:

答案 0 :(得分：2)

我从这个答案https://stackoverflow.com/a/8412989/2768318中摘取了解析xml字符串的最佳做法。

它是一种 JQUERY 方法，可以从 XML 轻松构建javascript对象。
这是您格式化的XML：https://pastebin.com/yySDn4QT（缺少多个标签）。

以下是我建造的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;
    });
});

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

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

<小时/> 的修改 一个例子就是这个小提琴：https://jsfiddle.net/rhneLsgL/5/ 我将实施分为两部分：

  1. 从现有XML
    2. 中提取数据
  2. 写下表格。

    3. 我发誓表格是您需要的形式。

    <小时/> Edit2 ：我已将此解决方案添加到我的个人Js Fiddle帐户中，以免丢失：https://jsfiddle.net/GaetanoPiazzolla/u40g8whx/

答案 1 :(得分：2)

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

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

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

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

<强> 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

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题