在AngularJS中将XML解析为HTML表 [英] parse XML into HTML table in AngularJS

问题描述

我有xml才能呈现到HTML表中.

xml在这里---

 <表> \ n<行cellSize = 9> \ n< Cell cellWidth = 937 cellId = ccc1faa7-f80d-43a7-8a3e-f1c4dfd79fc8> Cat.</Cell> \ n< Cell cellWidth = 2065 cellId = 0f3ece80-3001-4ee3-afa0-533f48c14ea2>电线范围AWG</Cell> \ n< Cell cellWidth = 796 cellId = cf6ad35f-bbab-481e-8453-bfc7bf7d2a4a>电线类型，Cu</Cell> \ n< Cell cellWidth = 450 cellId = 30888d78-be9e-438a-90a8-b86747d5cf5f> FW</Cell> \ n< Cell cellWidth = 900 cellId =6b3c509f-ed46-4078-8d45-e9d2f446d8a2>扭矩N·m</Cell> \ n< Cell cellWidth = 990 cellId = 7a90544f-7628-4be0-b8be-0c1c0ccac572>电压V</Cell> n单元格cellWidth = 1813 cellId = c94a30f9-cb6c-4090-8cae-9805b6ea8ad6>当前A</Cell> \ n< Cell cellWidth = 568 cellId = 80d5d978-2278-4657-8ac7-55f464b34d1d> UG</Cell>n< Cell cellWidth = 1057 cellId = 61b011ca-b707-46a1-8eaf-3e8a0a789d85" CA</Cell> \ n</Row> \ n< Row cellSize = 9> \ n< Cell cellWidth = 937 cellId= 73b236fc-3639-4d45-9704-7b1760661a3d rowSpanIndex = 0</Cell> \ n< Cell cellWidth = 1059 cellId = 5a7e6c9a-7074-42ce-98de-6a52df6a19fbcolumnSplitIndex = 1>前</Cell> \ n< Cell cellWidth = 1006 cellId = 8bdb1d8b-b302-4349-b512-6e404a4f09eb columnSplitIndex = 1>返回</Cell> \ n< Cell cellWidth = 796 cellId = f4568ead-293d-4781-8e1b-fbbf735f751f rowSpanIndex = 2</Cell> \ n< Cell cellWidth = 450 cellId = c0da00e6-f39a-4650-898e-a9e9a1532f4d rowSpanIndex = 3</Cell> \ n< CellcellWidth = 900 cellId = 91dd22c1-c1ed-429c-800e-642fbe286a0d rowSpanIndex = 4</Cell> \ n< Cell cellWidth = 990 cellId = 14652a0d-d82e-474b-89d6-403f9744968c rowSpanIndex = 5></Cell>; \ n" Cell cellWidth = 757 cellId = 18bf9cd0-b20f-4e09-a55c-c3c838d4cbf8 columnSplitIndex = 6>前</Cell> \ n< Cell cellWidth = 1056 cellId = ee5816c1-895a-49a2-9bc5-7e8Sp098Index0= 6>返回</Cell> \ n< Cell cellWidth = 568 cellId = 88468527-97f8-449e-96f1-d69a25d8f750 rowSpanIndex = 7</Cell> \ n< Cell cellWidth = 1057 cellId = 3c6674f5-0fe9-47f0-b4c4-065be55b30ba rowSpanIndex = 8</Cell> \ n</Row> \ n< Row cellSize = 9> \ n< Cell cellWidth = 937 cellId = 8100b2c7-fb67-463c-b5c8-6364506db726> SFK 4 M 65A</Cell> \ n< Cell cellWidth = 1059 cellId =4dbfe37e-484a-4104-990c-95cd4b137ca9 columnSplitIndex = 1> 6</Cell> \ n< Cell cellWidth = 1006 cellId = b7d96e78-cb2f-4d51-a4bc-275d27ad81a3 columnSplitIndex = 1> 1 x 14 \ n 5 x 16</Cell> \ n< Cell cellWidthWidth = 796 cellId = 674c21fe-bb6c-4ee3-b63e-4e11a919e673> str</Cell> \ Cell< 450 cellId = 5482f26e-aaaf-4801-81f3-58079aa16873>; 2</Cell> \ n< Cell cellWidth = 900 cellId = 41b0d9c7-76fb-4451-ae33-e99216390b8f> 2</Cell> \ n< Cell cellWidth = 990 cellId = 785670cf-9db3-438e-81f2-6d4a702bb11a> 300</Cell> \ n< Cell cellWidth = 757 cellId = 97973c3e-9332-4818-a3ae-3a6ef7c9a0b5 columnSplitIndex = 6> 65</Cell> \ n< Cell cellWidth = 1056 cellId = 97738ef1-8057-4074-b77a-daa5263c1d2b columnSplitIndex = 6> 1 x 15 \ n 5 x 10  \ n< Cell cellWidth = 568 cellId = 57e1e758-e429-40fb-b037-148711b82ce4 B，C</n< Cell cellWidth = 1057 cellId = efee41f9-198d-4bfe-93ad-b3038a1b312f> 2(115)，4</Cell>/n<;/Row> \ n< Row cellSize = 9> \ n< Cell cellWidth = 937 cellId = ad580518-d5a7-4bee-b3aa-ad078142a32a rowSpanIndex = 0></Cell> \ n< Cell cellWidth = 1059 cellId= 7fddf62a-0bcf-459d-871d-950b84a0d008 columnSplitIndex = 1> 6</Cell> \ n< Cell cellWidth = 1006 cellId = 32b943c7-7d6f-4854-b357-873de8fce6db columnSplitIndex = 1> 6 x 16</Cell>; \ n< Cell cellWidth = 796 cellId = dd72b05b-2f8b-4399-b4d4-a6b8e49dfbb1> str</Cell> \ n< Cell cellWidth = 450 cellId = 3041ef95-c317-44b2-946c-099c2e1d7643> 2</Cell> \ n< Cell cellWidth = 900 cellId = 07bcc3ab-1b0e-4313-8b10-de8083e88a7f> 2</Cell> \ n< Cell cellWidth = 990 cellId = 85375ca9-d71f-4d8d-98ef-4000178f2974> 300</Cell> \ n< Cell cellWidth = 757 cellId = f1f72c08-a3c5-4616-8af5-ea2e6a1f4d50 columnSplitIndex = 6> 60</Cell> \ n< Cell cellWidth= 1056 cellId = a79eac2a-ac11-4e57-b585-201d4290a63c columnSplitIndex = 6> 6 x 10</Cell> n< Cell cellWidth = 568 cellId = 3570fda3-04b6-4887-a4b1-e65ecec696f1> B，C</Cell> \ n< Cell cellWidth = 1057 cellId = 65690de0-3527-4023-8819-316fccf54084> 2(115)，4</Cell> \ n</Row> \ n< Row cellSize = 9>\ n< Cell cellWidth = 937 cellId = ed74958b-79cd-4db3-8974-11817da5e6bb> SFK 4 M 30A</Cell> \ n< Cell cellWidth = 1059 cellId = 0fa7659c-c331-4882-af9d-a1d2d63fe834 columnSplitIndex =1>/ \ n< Cell cellWidth = 1006 cellId = dd86b1f3-7eeb-41ec-894a-1f1783ad7962 columnSplitIndex = 1> 6 x 20</Cell> \ n< Cell cellWidth = 796 cellId = aad83ff2-0675-42f6-af86-93ee2d19f52e> str</Cell> \ n< Cell cellWidth = 450 cellId = d8a9c260-1a47-421e-9799-d423df19fc85> 2</Cell> \ n< Cell cellWidth = 900 cellId= 28238266-ba52-4bc0-8cee-bbded5d5629b> 2</Cell> \ n< Cell cellWidth = 990 cellId = c2ddc704-b498-4763-be89-b85ee8285719> 300< Cell \ n< Cell cellWidth = 757 cellId = 2a6a2a47-31fc-46b0-8728-b4935ccc74fc columnSplitIndex = 6 30</Cell> n< Cell cellWidth = 1056 cellId = 1487e210-50e7-4eff-a383-da50a89fd547columnSplitIndex = 6> 6 x 5</Cell> \ n< Cell cellWidth = 568 cellId = d736ecef-4ad0-4297-8bee-95ebac27a6a0> B，C</Cell> \ n< Cell cellWidth = 1057 cellId =1(b9e53f2-6061-46c4-adfb-02e40f3d0580> 2(115)，4</Cell>/n<行/n</Table" 

这是

解决方案

嗯，您有两个选择

首先:将XML转换为json并使用它来格式化所需的表我建议您查看此链接

第二个:要解析XML并提取所需的数据并将其转换为HTML，这将变得更加复杂，我建议您看一下此处，此处更新:对于第二个选项，它将是这样的

 < div ng-controller ="myCtrl">< pre class ="prettyprint lang-xml"></pre></div>App.directive('prettyprint'，function(){返回 {限制:"C"，链接:function postLink(scope，element，attrs){var xmlDoc = scope.dom;var table =< tr> Artist/th< Title</th</tr>";var x = xmlDoc.getElementsByTagName("CD");//在这里，您将从xml节点获取所有数据，这些数据将构建每一行并将其附加到表中对于(var i = 0; i< x.length; i ++){表格+ =< tr>< td>"+x [i] .getElementsByTagName("ARTIST")[0] .childNodes [0] .nodeValue +</td>< td>"+x [i] .getElementsByTagName("TITLE")[0] .childNodes [0] .nodeValue +</td</tr>"；}//返回表格element.text(table);}};}); 

I have xml which is needed to render into HTML table.

xml here ---

<Table>\n <Row cellSize=9>\n  <Cell cellWidth=937 cellId=ccc1faa7-f80d-43a7-8a3e-f1c4dfd79fc8>Cat. No. </Cell>\n  <Cell cellWidth=2065 cellId=0f3ece80-3001-4ee3-afa0-533f48c14ea2>Wire Range AWG  </Cell>\n  <Cell cellWidth=796 cellId=cf6ad35f-bbab-481e-8453-bfc7bf7d2a4a>Wire Type, Cu </Cell>\n  <Cell cellWidth=450 cellId=30888d78-be9e-438a-90a8-b86747d5cf5f>FW  </Cell>\n  <Cell cellWidth=900 cellId=6b3c509f-ed46-4078-8d45-e9d2f446d8a2>Torque N·m </Cell>\n  <Cell cellWidth=990 cellId=7a90544f-7628-4be0-b8be-0c1c0ccac572>Voltage V </Cell>\n  <Cell cellWidth=1813 cellId=c94a30f9-cb6c-4090-8cae-9805b6ea8ad6>Current A </Cell>\n  <Cell cellWidth=568 cellId=80d5d978-2278-4657-8ac7-55f464b34d1d>UG </Cell>\n  <Cell cellWidth=1057 cellId=61b011ca-b707-46a1-8eaf-3e8a0a789d85>CA </Cell>\n </Row>\n <Row cellSize=9>\n  <Cell cellWidth=937 cellId=73b236fc-3639-4d45-9704-7b1760661a3d rowSpanIndex=0></Cell>\n  <Cell cellWidth=1059 cellId=5a7e6c9a-7074-42ce-98de-6a52df6a19fb columnSplitIndex=1>Front </Cell>\n  <Cell cellWidth=1006 cellId=8bdb1d8b-b302-4349-b512-6e404a4f09eb columnSplitIndex=1>Back </Cell>\n  <Cell cellWidth=796 cellId=f4568ead-293d-4781-8e1b-fbbf735f751f rowSpanIndex=2></Cell>\n  <Cell cellWidth=450 cellId=c0da00e6-f39a-4650-898e-a9e9a1532f4d rowSpanIndex=3></Cell>\n  <Cell cellWidth=900 cellId=91dd22c1-c1ed-429c-800e-642fbe286a0d rowSpanIndex=4></Cell>\n  <Cell cellWidth=990 cellId=14652a0d-d82e-474b-89d6-403f9744968c rowSpanIndex=5></Cell>\n  <Cell cellWidth=757 cellId=18bf9cd0-b20f-4e09-a55c-c3c838d4cbf8 columnSplitIndex=6>Front </Cell>\n  <Cell cellWidth=1056 cellId=ee5816c1-895a-49a2-9bc5-7e8a098813a0 columnSplitIndex=6>Back </Cell>\n  <Cell cellWidth=568 cellId=88468527-97f8-449e-96f1-d69a25d8f750 rowSpanIndex=7></Cell>\n  <Cell cellWidth=1057 cellId=3c6674f5-0fe9-47f0-b4c4-065be55b30ba rowSpanIndex=8></Cell>\n </Row>\n <Row cellSize=9>\n  <Cell cellWidth=937 cellId=8100b2c7-fb67-463c-b5c8-6364506db726>SFK 4 M 65A </Cell>\n  <Cell cellWidth=1059 cellId=4dbfe37e-484a-4104-990c-95cd4b137ca9 columnSplitIndex=1>6 </Cell>\n  <Cell cellWidth=1006 cellId=b7d96e78-cb2f-4d51-a4bc-275d27ad81a3 columnSplitIndex=1>1 x 14\n 5 x 16 </Cell>\n  <Cell cellWidth=796 cellId=674c21fe-bb6c-4ee3-b63e-4e11a919e673>str </Cell>\n  <Cell cellWidth=450 cellId=5482f26e-aaaf-4801-81f3-58079aa16873>2 </Cell>\n  <Cell cellWidth=900 cellId=41b0d9c7-76fb-4451-ae33-e99216390b8f>2 </Cell>\n  <Cell cellWidth=990 cellId=785670cf-9db3-438e-81f2-6d4a702bb11a>300 </Cell>\n  <Cell cellWidth=757 cellId=97973c3e-9332-4818-a3ae-3a6ef7c9a0b5 columnSplitIndex=6>65 </Cell>\n  <Cell cellWidth=1056 cellId=97738ef1-8057-4074-b77a-daa5263c1d2b columnSplitIndex=6>1 x 15\n 5 x 10 </Cell>\n  <Cell cellWidth=568 cellId=57e1e758-e429-40fb-b037-148711b82ce4>B, C </Cell>\n  <Cell cellWidth=1057 cellId=efee41f9-198d-4bfe-93ad-b3038a1b312f>2(115), 4 </Cell>\n </Row>\n <Row cellSize=9>\n  <Cell cellWidth=937 cellId=ad580518-d5a7-4bee-b3aa-ad078142a32a rowSpanIndex=0></Cell>\n  <Cell cellWidth=1059 cellId=7fddf62a-0bcf-459d-871d-950b84a0d008 columnSplitIndex=1>6 </Cell>\n  <Cell cellWidth=1006 cellId=32b943c7-7d6f-4854-b357-873de8fce6db columnSplitIndex=1>6 x 16 </Cell>\n  <Cell cellWidth=796 cellId=dd72b05b-2f8b-4399-b4d4-a6b8e49dfbb1>str </Cell>\n  <Cell cellWidth=450 cellId=3041ef95-c317-44b2-946c-099c2e1d7643>2 </Cell>\n  <Cell cellWidth=900 cellId=07bcc3ab-1b0e-4313-8b10-de8083e88a7f>2 </Cell>\n  <Cell cellWidth=990 cellId=85375ca9-d71f-4d8d-98ef-4000178f2974>300 </Cell>\n  <Cell cellWidth=757 cellId=f1f72c08-a3c5-4616-8af5-ea2e6a1f4d50 columnSplitIndex=6>60 </Cell>\n  <Cell cellWidth=1056 cellId=a79eac2a-ac11-4e57-b585-201d4290a63c columnSplitIndex=6>6 x 10 </Cell>\n  <Cell cellWidth=568 cellId=3570fda3-04b6-4887-a4b1-e65ecec696f1>B, C </Cell>\n  <Cell cellWidth=1057 cellId=65690de0-3527-4023-8819-316fccf54084>2(115), 4 </Cell>\n </Row>\n <Row cellSize=9>\n  <Cell cellWidth=937 cellId=ed74958b-79cd-4db3-8974-11817da5e6bb>SFK 4 M 30A </Cell>\n  <Cell cellWidth=1059 cellId=0fa7659c-c331-4882-af9d-a1d2d63fe834 columnSplitIndex=1>10 </Cell>\n  <Cell cellWidth=1006 cellId=dd86b1f3-7eeb-41ec-894a-1f1783ad7962 columnSplitIndex=1>6 x 20 </Cell>\n  <Cell cellWidth=796 cellId=aad83ff2-0675-42f6-af86-93ee2d19f52e>str </Cell>\n  <Cell cellWidth=450 cellId=d8a9c260-1a47-421e-9799-d423df19fc85>2 </Cell>\n  <Cell cellWidth=900 cellId=28238266-ba52-4bc0-8cee-bbded5d5629b>2 </Cell>\n  <Cell cellWidth=990 cellId=c2ddc704-b498-4763-be89-b85ee8285719>300 </Cell>\n  <Cell cellWidth=757 cellId=2a6a2a47-31fc-46b0-8728-b4935ccc74fc columnSplitIndex=6>30 </Cell>\n  <Cell cellWidth=1056 cellId=1487e210-50e7-4eff-a383-da50a89fd547 columnSplitIndex=6>6 x 5 </Cell>\n  <Cell cellWidth=568 cellId=d736ecef-4ad0-4297-8bee-95ebac27a6a0>B, C </Cell>\n  <Cell cellWidth=1057 cellId=1b9e53f2-6061-46c4-adfb-02e40f3d0580>2(115), 4 </Cell>\n </Row>\n</Table>"

here is demo

rowSpanIndex = 2 --- indicate this blank cell is getting spanned with column no 2 above it

colSpanSize = 5 --- indicate this cell is getting spanned with 5 over columns

columnSplitIndex=6 --- its getting split w.r.t column 6 (essentially header column 6 will get span in html)

ignore all id attribute

解决方案

Well, you have two options

first: transform the XML to json and use it to format the table you want I suggest you look to this link

Second: to parse the XML and extract the data you want and transform it to HTML which will be more complicated, I suggest you look at this link

Update: another option is to use XSLT to use the XML itself inside the HTML see here, here and here Update: for the second option it will be something like this

<div ng-controller="myCtrl">
  <pre class="prettyprint lang-xml"></pre>
</div>

App.directive('prettyprint', function() {
  return {
    restrict: 'C',
    link: function postLink(scope, element, attrs) {
        var xmlDoc = scope.dom;
        var table="<tr><th>Artist</th><th>Title</th></tr>";
        var x = xmlDoc.getElementsByTagName("CD");

        //here you will get form the xml node all the data that will build each row and append it to the table
        for (var i = 0; i <x.length; i++) {
            table += "<tr><td>" +
            x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
            "</td><td>" +
            x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
            "</td></tr>";
        }

        //return the table 
        element.text(table);
    }
  };
});

这篇关于在AngularJS中将XML解析为HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！