angularjs 在html中以表格格式显示xml数据

2ic8powd  于 12个月前  发布在  Angular
关注(0)|答案(4)|浏览(117)

我想检索XML数据在HTML中的表格格式.我试图使用aerogram,但数据不来.这里可能是什么问题,任何人都可以帮助我.我新aerogram.随时告诉我的代码中有什么错误.下面是我想要喜欢这个图片

$(document).ready(function() {

        $(window).load(function () {
            $.ajax({
                type: 'GET',
                url: '2.xml',
                dataType: 'xml',
                success: function myFunction(xml) {
					  var i;
					  var xmlDoc = xml.responseXML;
					  var table="<tr><th>Artist</th><th>Title</th></tr>";
					  var x = xmlDoc.getElementsByTagName("Row");
					  for (i = 0; i <x.length; i++) { 
					    table += "<tr><td>" +
					    x[i].getElementsByTagName("Process")[0].childNodes[0].nodeValue +
					    "</td><td>" +
					    x[i].getElementsByTagName("Product")[0].childNodes[0].nodeValue +
					    "</td></tr>" +
					     x[i].getElementsByTagName("Operation")[0].childNodes[0].nodeValue +
					    "</td></tr>" +
					     x[i].getElementsByTagName("Description")[0].childNodes[0].nodeValue +
					    "</td></tr>" +
					     x[i].getElementsByTagName("Batch")[0].childNodes[0].nodeValue +
					    "</td></tr>" +
					     x[i].getElementsByTagName("QTY")[0].childNodes[0].nodeValue +
					    "</td></tr>" +
					     x[i].getElementsByTagName("PlannedSchedule")[0].childNodes[0].nodeValue +
					    "</td></tr>" +
					     x[i].getElementsByTagName("ActualSchedule")[0].childNodes[0].nodeValue +
					    "</td></tr>" +
					    x[i].getElementsByTagName("Status")[0].childNodes[0].nodeValue +
					    "</td></tr>";

					  }
					  document.getElementById("demo").innerHTML = table;
					}
            });
        });
    });

个字符
XML:

<Rowsets>
  <Rowset>
      <Row>
      <Process>70787863</Process>
      <Product>600033</Product>
      <Operation>Operation goes here</Operation>
      <Description>Operation description goes here</Description>
      <Batch>259</Batch>
      <QTY>999</QTY>
   </Row>
   <Row>
      <Process>707863</Process>
      <Product>6033</Product>
      <Operation>Operation goes here</Operation>
      <Description>Operation description goes here</Description>
      <Batch>249</Batch>
      <QTY>99</QTY>
   </Row>
   </Rowset>
   </Rowsets>

nx7onnlm

nx7onnlm1#

我认为你的代码的问题是你在xmlDoc中没有定义。

你可以通过下面的代码来实现。

HTML

<table id="demo">
<thead>
    <th>Product</th>
    <th>Process</th>
    <th>Operation</th>
    <th>Description</th>
    <th>Batch</th>
    <th>Qty</th>
</thead>
<tbody></tbody>

字符串
JS

$.ajax({
    type: 'GET',
    url: 'data.xml',//Your xml data
    dataType: 'xml',
    success: function(xml){
        $(xml).find("Row").each(function(){
            var Product = $( this ).find( 'Process' ).text()
            var Process = $( this ).find( 'Product' ).text()
            var Operation = $( this ).find( 'Operation' ).text()
            var Description = $( this ).find( 'Description' ).text()
            var Batch = $( this ).find( 'Batch' ).text()
            var Qty = $( this ).find( 'Qty' ).text()
            $('#demo tbody').append('<tr><td>'+Product+'</td><td>'+Process+'</td><td>'+Operation+'</td><td>'+Description+'</td><td>'+Batch+'</td><td>'+Qty+'</td></tr>')

        });
    }
    })

fumotvh3

fumotvh32#

你真的应该看看JQuery数据表,我一直用它们来填充Ajax数据表。
JQuery Datatables

pepwfjgg

pepwfjgg3#

function formatXml(xml) {
  var formatted = '';
  var reg = /(>)(<)(\/*)/g;
  xml = xml.replace(reg, '$1\r\n$2$3');
  var pad = 0;
  xml.split('\r\n').forEach(function (node) {
    var indent = 0;
    if (node.match(/.+<\/\w[^>]*>$/)) {
      indent = 0;
    } else if (node.match(/^<\/\w/)) {
      if (pad !== 0) {
        pad -= 1;
      }
    } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
      indent = 1;
    } else {
      indent = 0;
    }

    var padding = '';
    for (var i = 0; i < pad; i++) {
      padding += '  ';
    }

    formatted += padding + node + '\r\n';
    pad += indent;
  });

  return formatted;
}

字符串

zbdgwd5y

zbdgwd5y4#

显然,您的AJAX请求已成功发送,并且您成功接收到以下XML作为响应:

<Rowsets>
  <Rowset>
      <Row>
      <Process>70787863</Process>
      <Product>600033</Product>
      <Operation>Operation goes here</Operation>
      <Description>Operation description goes here</Description>
      <Batch>259</Batch>
      <QTY>999</QTY>
   </Row>
   <Row>
      <Process>707863</Process>
      <Product>6033</Product>
      <Operation>Operation goes here</Operation>
      <Description>Operation description goes here</Description>
      <Batch>249</Batch>
      <QTY>99</QTY>
   </Row>
   </Rowset>
   </Rowsets>

字符串
你想把它转换成HTML。所以,我将使用这个XML作为我的出发点,并把它转换成正确的HTML结构:

let input = `
  <Rowsets>
  <Rowset>
      <Row>
      <Process>70787863</Process>
      <Product>600033</Product>
      <Operation>Operation goes here</Operation>
      <Description>Operation description goes here</Description>
      <Batch>259</Batch>
      <QTY>999</QTY>
   </Row>
   <Row>
      <Process>707863</Process>
      <Product>6033</Product>
      <Operation>Operation goes here</Operation>
      <Description>Operation description goes here</Description>
      <Batch>249</Batch>
      <QTY>99</QTY>
   </Row>
   </Rowset>
   </Rowsets>
`;

let rows = input
    .replaceAll("<Rowsets>", "<table id='foo'>")
    .replaceAll("</Rowsets>", "</table>")
    .replaceAll("<Rowset>", "<tbody>")
    .replaceAll("</Rowset>", "</tbody>")
    .replaceAll("<Row>", "<tr>")
    .replaceAll("</Row>", "</tr>").split("\n");
let headers = [];
for (let index = 0; index < rows.length; index++) {
    if (rows[index].trim().indexOf("</") > 0) {
        let tmp = rows[index].substring(rows[index].indexOf("<") + 1);
        tmp = tmp.substring(0, tmp.indexOf(">"));
        if (headers.indexOf(`<th>${tmp}</th>`) < 0) headers.push(`<th>${tmp}</th>`);
        rows[index] = rows[index].replace(`<${tmp}>`, "<td>").replace(`</${tmp}>`, "</td>");
    }
}
rows[rows.map(item => item.trim()).indexOf("<tbody>")] = `<thead>${headers.join("")}</thead><tbody>`;
//console.log(rows);
document.write(rows.join("\n"));


请注意,我假设标签在单独的行中,就像在您的示例中一样。如果我们可以依赖这个假设,解决方案就可以工作。

相关问题