Tutorial :jQuery XML Parsing/Traversing


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,


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>  


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

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »