javascript - 如何调用xml信息

问题描述

问 题

我的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格式怎样生成合适的表格？

解决方案

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

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);

这篇关于javascript - 如何调用xml信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！