jQuery XML Parsing/Traversing

Question

Hello guys,

I have the following XML-

<rows>
   <row id="5">
      <cell>Item1</cell>
   <attrs>
    <attr>
      <id>1</id>
      <type>CheckBox</type>
      <values>
        <value>
          <id>10</id>
        </value>
        <value>
          <id>11</id>
        </value>
      </values>
    </attr>
     <attr>
       <id>2</id>
       <type>CheckBox</type>
       <values>
         <value>
           <id>20</id>
         </value>
         <value>
           <id>21</id>
         </value>
       </values>
     </attr>
  </attrs>
   </row>
</rows>

What I want to do is to loop each of the of a certain row.

I tried to do this in order to get all of the attr ids but I also got the values ids.

function fillForm(id){
    var theRow = $(theXmlDoc).find('row[id='+id+']').get()

    $(theRow).find("attr").each(function(i) 
    {
        alert($(this).find("id").text());
    });
}

I also would like to note that main goal is loop each attr and afterwards to loop each value while I have the attr's id.

P.S if you think of an easier/simpler way to do so with some other library I'm open for suggestions.

Thanks in advance,

Answer 1

This should work for you

function fillForm(id){
    var row = $(theXmlDoc).find('row#+'+ id);
    var ids = row.find( "attr > id");

    ids.each(function(i) 
    {
        alert($(this).text());
    });
}

PS. You can use xpath either:

var ids = document.evaluate( '//rows/row[@id='+id + ']/attr/id/text( )', theXmlDoc, null, XPathResult.ANY_TYPE, null );

Answer 2

I'm not clear what you're trying to loop over, I think one of the tags in your question was garbled. You say: "What I want to do is to loop each of the of a certain row." and I think you had a tag in there.

Anyway, here's some examples of extracting data from the parsed xml document using jQuery. The comments show what will be alerted.

I think part of the problem is you have the id values as siblings rather than children to the attributes. It seems like a more coherent structure might be:

<rows>
    <row id="5">
     <cell>Item1</cell>
     <attrs>
      <attr id="1">
       <type>CheckBox</type>
       <values>
        <value>
         <id>10</id>
        </value>
        <value>
         <id>11</id>
        </value>
       </values>
      </attr>
      <attr id="2">
       <type>CheckBox</type>
       <values>
        <value>
         <id>20</id>
        </value>
        <value>
         <id>21</id>
        </value>
       </values>
      </attr>
     </attrs>
    </row>
</rows>

But if you don't have control over the xml, please ignore that suggestion. :-)

Okay, here are some samples of traversal to get various pieces of data:

First let's just get "Item1"

<script type="text/javascript">
// Item1
$.get('sample.xml', null, function (data, textStatus) {
    alert( $(data).find('rows row[id=5] cell').text());
}, 'xml');
</script>

Now we'll get the 1 and the 2:

<script type="text/javascript">
// 1
// 2
$.get('sample.xml', null, function (data, textStatus) {
    $(data).find('rows row[id=5] attrs attr > id').each( function(){
      alert($(this).text()); // 1, 2
    });
}, 'xml');
</script>

And lastly, let's pull out the main attr ids and tie them into the values:

<script type="text/javascript">
// rows row[id=5] attrs attr > id 1 has inner ids of 10,11
// rows row[id=5] attrs attr > id 2 has inner ids of 20,21
$.get('sample.xml', null, function (data, textStatus) {

     var out = ''
     $(data).find('rows row[id=5] attrs attr > id').each( function(){
       out += 'rows row[id=5] attrs attr > id ' + $(this).text();
       var innerIds = [];
       $(this).siblings('values').find('value id').each(function(){
        innerIds.push($(this).text())
       });
       out += ' has inner Ids of ' + innerIds.join(',') + '\n';
     });
     alert(out);
    }, 'xml');
</script>