Jquery- parse xml with duplicate entries into separate columns

Question

I have an XML file with the following structure (this structure repeats):

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

What I need to get are the name of the file, the distance and localCoords into a table. But what I have right now combines the duplicate entries together.

$(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>');
});

I also tried this:

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

but it just duplicated the same thing.

What would be even better, would have the localCoords field broken into three sub-columns of values.

Can anyone lend a hand on this issue? Much appreciated.

imnancysun · Accepted Answer · 2015-06-12 00:20:23Z

1

You need to loop through the duplicate elements in the XML, in this case "WayPt" not "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>');
});

answered Jun 12, 2015 at 0:20

imnancysun

6428 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mudrock Over a year ago

I added this var distance =[], localCoords=[]; and this

$("#XML").append('<td class="Distance">'+distance[0]+'</td>');       $("#XML").append('<td class="localCoords">'+localCoords[0]+'</td>');       $("#XML").append('<td class="Distance">'+distance[1]+'</td>');       $("#XML").append('<td class="localCoords">'+localCoords[1]+'</td>');

to complete it

mudrock Over a year ago

One thing you changed which was incorrect was that the File DOES repeat so I still need the each for that.

mudrock · Accepted Answer · 2015-06-12 15:18:47Z

Just to clarify the answer above because there were a couple oversights. The 'File' repeats many times so there needed to be an 'each' for that as well as the 'WayPt':

$(document).ready(function(){
  var idx=0;
  var distance =[], localCoords=[];

  $("#XML").append('<table><tbody><tr><th>File</th><th>Distance</th><th>LocalCoords</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();
         $("WayPt", xmlData).each(function(){
           distance[idx] = $(this).find("distance").text();
           localCoords[idx] = $(this).find("localCoords").text();
           idx=1;
         });

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

Collectives™ on Stack Overflow

Jquery- parse xml with duplicate entries into separate columns

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related