javascript - Jquery-将重复条目解析到单独的列中

Question

我有一个具有以下结构的 XML 文件(此结构重复):

<File>
  <scanRange>0,887</scanRange>
  <name>HARMONY   __050.DZT</name>
  <Profile>
    <scanRange>0,887</scanRange>
    <Comment>
      <scan>0</scan>
      <description>Data Collection Notes: </description>
    </Comment>
    <WayPt>
      <scan>0</scan>
      <mark>User</mark>
      <name>Mark2</name>
      <distance>0.0000000</distance>
      <localCoords>0.0000000,0.5000000,0.0000000</localCoords>
    </WayPt>
    <WayPt>
      <scan>887</scan>
      <distance>18.000000</distance>
      <localCoords>18.000000,0.5000000,0.0000000</localCoords>
    </WayPt>
  </Profile>
</File>

我需要获取的是文件名、距离和 localCoords 到表中。但我现在所拥有的将重复的条目组合在一起。

$(document).ready(function() {

    $("#XML").append('<table><tr><th>File</th><th>Distance</th>  <th>LocalCoords</th>');
    $.ajax({
        type: "GET",
        url: "HARMONY01.DZX",
        dataType: "xml",
        success: function(xmlData) {
            $("File", xmlData).each(function() {
                var name = $(this).find("name").text(),
                    distance = $(this).find("distance").text(),
                    localCoords = $(this).find("localCoords").text();

                $("#XML").append('<tr>');
                $("#XML").append('<td class="name">' + name + '</td>');
                $("#XML").append('<td class="Distance">' + distance + '</td>');
                $("#XML").append('<td class="localCoords">' + localCoords + '</td>');
                $("#XML").append('</tr>');
            });
        }
    });
    $("#XML").append('</table>');
});

我也尝试过这个:

var name1 = $(this).find("name").text(),
    name2 = $(this).find("name").text(),
  distance1 = $(this).find("distance").text(),
  distance2 = $(this).find("distance").text(),
  localCoords1 = $(this).find("localCoords").text();
  localCoords2 = $(this).find("localCoords").text();

  $("#XML").append('<tr>');       
  $("#XML").append('<td class="name">'+name1+'</td>');
  $("#XML").append('<td class="Distance">'+distance1+'</td>');
  $("#XML").append('<td class="localCoords">'+localCoords1+'</td>');
  $("#XML").append('<td class="Distance">'+distance2+'</td>');
  $("#XML").append('<td class="localCoords">'+localCoords2+'</td>');
  $("#XML").append('</tr>');

但它只是重复了同样的事情。

如果将 localCoords 字段分为三个值子列，那就更好了。

有人可以帮忙解决这个问题吗？非常感谢。

Answer 1

您需要循环遍历 XML 中的重复元素，在本例中为“WayPt”而不是“File”。

    $(document).ready(function() {

    $("#XML").append('<table><tr><th>File</th><th>Distance</th>  <th>LocalCoords</th>');
    $.ajax({
        type: "GET",
        url: "HARMONY01.DZX",
        dataType: "xml",
        success: function(xmlData) {
            var name = $(xmlData).find("File").find("name").text();
            $("WayPt", xmlData).each(function() {
                var distance = $(this).find("distance").text(),
                    localCoords = $(this).find("localCoords").text();

                $("#XML").append('<tr>');
                $("#XML").append('<td class="name">' + name + '</td>');
                $("#XML").append('<td class="Distance">' + distance + '</td>');
                $("#XML").append('<td class="localCoords">' + localCoords + '</td>');
                $("#XML").append('</tr>');   console.log("jhk");
            });
        }
    });
    $("#XML").append('</table>');
});