javascript - 如何调用xml信息

Question

我的xml文件如下：

<?xml version="1.0" encoding="utf-8" ?>
<message>
  <build>
    <date>日期</date>
    <buildnum>build号</buildnum>
    <rate>通过率</rate>
  </build>
  <build>
    <date>日期</date>
    <buildnum>build号</buildnum>
    <rate>通过率</rate>
  </build>
  <build>
    <date>日期</date>
    <buildnum>build号</buildnum>
    <rate>通过率</rate>
  </build>
  <build>
    <date>日期</date>
    <buildnum>build号</buildnum>
    <rate>通过率</rate>
  </build>
  <build>
    <date>日期</date>
    <buildnum>build号</buildnum>
    <rate>通过率</rate>
  </build>
</message>

我想日期在一行，build号在一行，通过率在一行，这样对应着形成表格。

日期	日期	日期	日期
build	build	build	build
rate	rate	rate	rate

而我这样写

    <script type="text/javascript">
    $(document).ready(function(){
          $.ajax({
              type:"GET",
              dataType:"xml",
              url:"dist/data/1.xml",
              success:function(xml){
              var htmlData="";
              $(xml).find('build').each(function(){
                var $student = $(this);
                var date = $student.find('date').text();
                var buildnum = $student.find('buildnum').text();
                var rate = $student.find('rate').text();

                htmlData += '<tr>'+'<td>'+date+'</td>'+'</tr>'+'<tr>'+'<td>'+buildnum+'</td>'+'</tr>'+'<tr>'+'<td>'+rate+'</td>'+'</tr>';
              });
              htmlData+="</table>";
              $("table").append(htmlData);
            },
          });
        });
    </script>

直接变成

我只会一行行来写，但是那样我的xml格式就要变动。
请问我要不变xml格式怎样生成合适的表格？

Answer 1

我的做法可能会更慢一些，因为中间转换了数据，但是应该更好理解。

https://jsfiddle.net/kvoedtjb/

// 用这个来模拟 ajax 得到的 xml
const xml = $(xml);

// 先从 XML 提取数据，以 JavaScript 对象形式取出来
const data = $("build")
    .map((i, build) => {
        const $build = $(build);
        return {
            date: $build.children("date").text(),
            buildnum: $build.children("buildnum").text(),
            rate: $build.children("rate").text()
        };
    })
    .toArray();

// 因为表格显示的样式是转置后的，所以这里按列标题(作为行)来转置
const rotate = ["date", "buildnum", "rate"].map(name => {
    return data.map(m => m[name]);
});

// 生成行 jQuery 对象(包含单元格)
const rows = rotate.map(row => {
    const tds = row.map(v => {
        return $("<td>").text(v || "");
    });
    return $("<tr>").append(tds);
});

// 所有行加入到表格中去
$("table").empty().append(rows);

Answer 2

在你代码基础上改的，有一些可以优化的地方

<script type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                type: "GET",
                dataType: "xml",
                url: "dist/data/1.xml",
                success: function(xml) {
                  console.log(xml);
                    var dates = ['<tr>'],
                        buildnums = ['<tr>'],
                        rates = ['<tr>'];
                        $(xml).find('build').each(function() {
                            var $student = $(this);
                            var date = $student.find('date').text();
                            var buildnum = $student.find('buildnum').text();
                            var rate = $student.find('rate').text();
                            dates.push('<th>' + date + '</th>');
                            buildnums.push('<td>' + buildnum + '</td>');
                            rates.push('<td>' + rate + '</td>');
                        });
                    dates.push('</tr>');
                    buildnums.push('</tr>');
                    rates.push('</tr>');
                    $("table").html(dates.concat(buildnums, rates).join(''));
                },
            });
        });
    </script>

Answer 3

你这问题真心看不明白。麻烦再说清楚点，愁死我了。

Answer 4

$(document).ready(function(){
          $.ajax({
              type:"GET",
              dataType:"xml",
              url:"1.xml",
              success:function(xml){
              var htmlData="<table border='1'>";
              var dateTr="";
              var buildnumTr="";
              var rateTr="";
              $(xml).find('build').each(function(index,item){
                var $student = $(this);
                var date = $student.find('date').text();
                var buildnum = $student.find('buildnum').text();
                var rate = $student.find('rate').text();
                dateTr += "<td>"+date+"</td>"; 
                buildnumTr += "<td>"+buildnum+"</td>";
                rateTr += "<td>"+rate+"</td>";
              });

              htmlData+="<tr>"+dateTr+"</tr><tr>"+buildnumTr+"</tr><tr>"+rateTr+"</tr></table>";
              $("body").append(htmlData);
            },
          });
        });
       这样子应该就可以.