jquery parseXML : Properly traverse XML file hierarchically

jquery parseXML : Properly traverse XML file hierarchically

I have an XML file (below) that I need to parse using jquery "**parseXML**".    


The goal:

Traverse the hierarchy of XML file and loop over the iterations to extract the data.  

- List in an array of all "mycase"  
  - for each "mycase" iteration, the list in an array of all "testrun"   
      - for each "testrun" iteration, the list in an array of all "router"   
          - for each "router" iteration, the list in an array of all "cmdname" 

and "cmdfile"   

Desired outcome:

The optimal outcome is to have each time the number of elements at each level, then loop over the number of iteration to show the content (ex: to the page) and continue doing the same at deeper level, etc...


    Casename:- Case name
    topofile:- file.jpg
    Case id:- 1
    --- testrun id:- 1
    ------ router id:- R1
    --------- cmdname:- cmd111, cmdfile:- file111
    --------- cmdname:- cmd112, cmdfile:- file112
    ------ router id:- R2
    --------- cmdname:- cmd121, cmdfile:- file121
    --- testrun id:- 2
    ------ router id:- R1
    --------- cmdname:- cmd211, cmdfile:- file211
    --------- cmdname:- cmd212, cmdfile:- file212
    ------ router id:- R2
    --------- cmdname:- cmd221, cmdfile:- file221
    ------ router id:- R3
    --------- cmdname:- cmd231, cmdfile:- file231
    --------- cmdname:- cmd232, cmdfile:- file232


  

The issue:

I am using the below code and I could not hierarchically iterate over the elements. Tags are read globally not per children element.
  
For each testrun all routers are listed, even those belonging to other testruns.
For each router inside each testrun all commands are listed, even those belonging to other routers     
    
XML content:

  1.     <?xml version="1.0" ?>
  2.     <lab>
  3.      <mycase id="1">
  4.      <casename>Case name</casename>
  5.      <topo>file.jpg</topo>
  6.      <testrun id="1">
  7.      <router id="R1">
  8.      <command>
  9.      <cmdname>cmd111</cmdname>
  10.      <cmdfile>file111</cmdfile>
  11.      </command>
  12.      <command>
  13.      <cmdname>cmd112</cmdname>
  14.      <cmdfile>file112</cmdfile>
  15.      </command>
  16.      </router>
  17.      <router id="R2">
  18.      <command>
  19.      <cmdname>cmd121</cmdname>
  20.      <cmdfile>file121</cmdfile>
  21.      </command>
  22.      </router>
  23.      </testrun>
  24.      <testrun id="2">
  25.      <router id="R1">
  26.      <command>
  27.      <cmdname>cmd211</cmdname>
  28.      <cmdfile>file211</cmdfile>
  29.      </command>
  30.      <command>
  31.      <cmdname>cmd212</cmdname>
  32.      <cmdfile>file212</cmdfile>
  33.      </command>
  34.      </router>
  35.      <router id="R2">
  36.      <command>
  37.      <cmdname>cmd221</cmdname>
  38.      <cmdfile>file221</cmdfile>
  39.      </command>
  40.      </router>
  41.      <router id="R3">
  42.      <command>
  43.      <cmdname>cmd231</cmdname>
  44.      <cmdfile>file231</cmdfile>
  45.      </command>
  46.      <command>
  47.      <cmdname>cmd232</cmdname>
  48.      <cmdfile>file232</cmdfile>
  49.      </command>
  50.      </router>
  51.      </testrun>
  52.      </mycase>
  53.     </lab>



  1.     var xml='<?xml version="1.0" ?><lab><mycase id="1"><casename>Case name</casename><topo>file.jpg</topo><testrun id="1"><router id="R1"><command><cmdname>cmd111</cmdname><cmdfile>file111</cmdfile></command><command><cmdname>cmd112</cmdname><cmdfile>file112</cmdfile></command></router><router id="R2"><command><cmdname>cmd121</cmdname><cmdfile>file121</cmdfile></command></router></testrun><testrun id="2"><router id="R1"><command><cmdname>cmd211</cmdname><cmdfile>file211</cmdfile></command><command><cmdname>cmd212</cmdname><cmdfile>file212</cmdfile></command></router><router id="R2"><command><cmdname>cmd221</cmdname><cmdfile>file221</cmdfile></command></router><router id="R3"><command><cmdname>cmd231</cmdname><cmdfile>file231</cmdfile></command><command><cmdname>cmd232</cmdname><cmdfile>file232</cmdfile></command></router></testrun></mycase></lab>';

  2.     $(document).ready(function () {
  3.      $xml = $( $.parseXML( xml ) );


  4.      $xml.find("mycase").each(function(){
  5.         $("#container").append(" Casename:- " + $(this).find("casename").text() + "<br />");
  6.         $("#container").append(" topofile:- " + $(this).find("topo").text() + "<br />");
  7.      $("#container").append(" Case id:- " + $(this).attr("id") + "<br />");
  8.            $xml.find("testrun").each(function(){
  9.               $("#container").append("--- testrun id:- " + $(this).attr("id") + "<br />");
  10.                $xml.find("testrun").children("router").each(function(){
  11.                     $("#container").append("------ router id:- " + $(this).attr("id") + "<br />");
  12.                     $xml.find("command").each(function(){
  13.                        $("#container").append("--------- cmdname:- " + $(this).find("cmdname").text() + ", cmdfile:- " + $(this).find("cmdfile").text()+ "<br />");
  14.                     });             
  15.                 });
  16.              });
  17.      });  
  18.     });


HTML part
  1.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  2.     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  3.     <html>
  4.      <head>
  5.      </head>

  6.      <body>
  7.       <div id="container"/>
  8.      </body>
  9.     </html>




Tried to use both below formats to get the specific children of an element, but without success:  
Both lists all routers on the XML doc.


  1.     $xml.find("mycase > testrun").each(function(){
  2.         $("#container").append(" router:- " + $(this).attr('id') + "<br />");
  3.     });
  4.     
  5.     
  6.     $xml.find("mycase").children("testrun").each(function(){
  7.         $("#container").append(" router:- " + $(this).attr('id') + "<br />");
  8.     });

Any hint on how to propertly iterate over an XML file using "parseXML"?

Thanks in advance.