jQuery Makes Parsing XML Easy: jQuery, JavaScript, XML

jQuery Makes Parsing XML Easy

Category: JavaScript & jQuery Tags: jQuery, JavaScript, XML | Written before Dec, 2007

I am building a Google Maps project and jQuery is making my life so much easier when parsing XML.

Regular JavaScript XML Parsing

JavaScript:
  1. var xmlDoc = request.responseXML;
  2. try // Build Markers, if available
  3. {
  4.     var markers = xmlDoc.getElementsByTagName("marker") ;
  5.     for ( var i = 0; i < markers.length ; i++ )
  6.     {
  7.         var point = {
  8.             markers[i].getAttribute("lat")),
  9.             markers[i].getAttribute("lng")
  10.         };
  11.     }
  12. } catch(e) {}

jQuery XML Parsing

JavaScript:
  1. $(request.responseXML).find("marker").each(function() {
  2.     var marker = $(this);
  3.     var point = {
  4.         marker.attr("lat"),
  5.         marker.attr("lng")
  6.     };
  7. });

The jQuery code is so much easier to read and understand. This is a basic example, but imagine when things get complex. After writing a few complex statements, you will realize the jQuery code will still be understandable, where as the JavaScript code will become hard to maintain. Thank you jQuery for making my job easier and more fun.

Comments

#1. Forrest on Nov 07, 2007
Wow! *quickly re-writes own code excitedly*
#2. Ryan on Nov 07, 2007
One of the best things about ActionScript 3 is E4X syntax where this stuff is really easy. I'm looking forward to when JavaScript gets that upgrade and no JavaScript trickery is needed.
#3. Marc http://marcgrabanski.com on Nov 07, 2007
Until then, jQuery is our upgrade to JavaScript. And it does a dang good job at it.
#4. yitz http://yitz.com/ on Dec 25, 2007
thanks, this post was the decisive one in helping me to achieve successful xml parsing in jquery.. it was the perfect tutorial :)
#5. Mustafa on Mar 22, 2008
thank for good view about jquery, I will start it using
#6. ryan http://12tb.com on Oct 09, 2008
thanks! that was super easy!! No 'for' loops or 'getElementsByTagName'
#7. Your name on Oct 09, 2008
Wont work on IE 7..
#8. Marc Grabanski http://marcgrabanski.com on Oct 09, 2008
Depends on how you fetch the XML. I was using the Google XML loader and it worked fine in IE6+
#9. Martin Sarsini http://sarsini.it on Oct 11, 2008
Never thought could be so much simple!
#10. Fabio http://www.jmssolucoes.com.br on Feb 21, 2009
It's very useful !!!!


Fabio Rodrigues,
www.jmssolucoes.com.br
#11. Laga on Feb 27, 2009
Hi all,
Thank you for the example its very useful. And its definitely much easier than parsing with simple javascript.

though I have a question: Is there any tutorial that goes in more details??

Best regards,
Nassim
#12. Addy Osmani http://blarnee.com/wp/myspace-blog-reader-wid on Feb 28, 2009
Nice article! We recently had to parse RSS feeds from mySpace using nothing more than jQuery and we found a slightly quicker solution - jFeed. I would definitely recommend checking it out. As for our widget, you’re all free to grab the sources to see how we tackled the problem:

Download sources
#13. knowingPark on Apr 23, 2009
Thanks, saved my bacon. I promoted you on the googlator :)
#14. Matt http://dirtymonkey.co.uk on May 24, 2009
Definitely! using it now for a web based URL lookup tool, loads of xml responses - this speeded up development time and saved myself from any brain damage! :)
#15. Rodrigo on May 24, 2009
How do I get this working on IE7, what is the Google XML loader, I couldnt find anything about it on the web... I using my app's generated raw XML and it doesnt work on IE =(
#16. Phil http://www.philsbury.co.uk on Jun 17, 2009
Nice, but you're essentially replacing 12 lines of JavaScript with a whole library of it instead. That said, 99.999% of all my projects use jQuery anyway! :)
#17. Mark http://www.cybercussion.com on Aug 11, 2009
Thanks for the tip on this, I was writing out getElementByTagName and getAttribute and didn't even think to just parse XML with JQuery.
I'm trying to figure out how to get to the Nth page in my XML this way but doesn't seem like you can do $(xmlDoc).find('page')[8].attr('label'); I'll keep googlin....
#18. Mark http://www.cybercussion.com on Aug 11, 2009
ok $(xmldoc).find('page').eq(8).attr('label');
#19. Mark Howard http://www.elexient.com on Aug 27, 2009
Like someone else said above... This post got me going and I couldn't help myself but spend a late, late night rewriting my XML parsing functions to use jQuery. Now, I am very close to full cross-browser support.

I wish I would have started using jQuery years ago.

Thanks for the simple write-up showcasing jQuery's awesomeness!


#20. slothbear on Sep 02, 2009
Thanks for this post -- it helped me along in the jQuery world.
#21. Atea Webdevelopment http://www.atea-webdevlopment.nl on Sep 04, 2009
Thanks! Good examples that helped me!
#22. blogging developer http://www.bloggingdeveloper.com on Nov 16, 2009
Great post. Thanks.

Here is a jQuery Plugin for easy XML parsing: http://www.bloggingdeveloper.com/post/Parse-XML-with-Javascript-jParse-jQuery-Plugin-for-Parsing-XML.aspx
#23. nongeek http://www.nongeekperspective.com.com on Dec 07, 2009
Very useful, thanks.

I needed to parse some xml files and I found that the solution is right in my browser. jQuery makes it really easy. I prefer to use the ajax() method to retrieve the xml file, though.
#24. José Carlos http://domain.com on Dec 08, 2009
Nice post! I'm looking for something like this for hours !!

Congratulations !

Leave a Comment

Other Reading - Categories