jQuery XML – How to Parse XML Using jQuery

javascriptjqueryxml

How do I parse XML, and how can I navigate the result using jQuery? Here is my sample XML:

<Pages>
  <Page Name="test">
    <controls>
      <test>this is a test.</test>
    </controls>
  </Page>
  <Page Name = "User">
    <controls>
      <name>Sunil</name>
    </controls>
  </Page>
</Pages>

I would like to find the node by this path Pages -> Page Name -> controls -> test ?

Best Answer

There is the $.parseXML function for this: http://api.jquery.com/jQuery.parseXML/

You can use it like this:

var xml = $.parseXML(yourfile.xml),
  $xml = $( xml ),
  $test = $xml.find('test');

console.log($test.text());

If you really want an object, you need a plugin for that. This plugin for instance, will convert your XML to JSON: http://www.fyneworks.com/jquery/xml-to-json/

Related Solutions

jQuery – XML Parsing Guide

This code works for me in Safari and (surprisingly) Firefox:

$.ajax({
    type: "GET",
    url: "list.xml",
    dataType: "xml",
    success: function(xml) {
  $(xml).find('Scenes').each(function(){
      $(this).find('Scene').each(function(){
          var name = $(this).attr('Name');                            
          $('<div class="items" ></div>').html('<p>'+name+'</p>').appendTo('#page-wrap'); 
             });                     
         });
    },
    error:function(a,b,c) { console.log( c ) }
});

The reason it doesn't work in some browsers is likely due to the fact that you're hosting from the filesystem (assuming you are). Chrome and Firefox tend to give trouble when accessing the filesystem via AJAX request due to Same Origin Policy.

The javascript is fine. You're just either getting an empty response, or an error.

This question may be applicable:

Problems with jQuery getJSON using local files in Chrome

JavaScript – How to Parse XML with jQuery

The cross-browser approach is the following, which I posted a few minutes ago in answer to a similar question:

var parseXml;

if (window.DOMParser) {
    parseXml = function(xmlStr) {
        return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
    };
} else if (typeof window.ActiveXObject != "undefined" && new window.ActiveXObject("Microsoft.XMLDOM")) {
    parseXml = function(xmlStr) {
        var xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.loadXML(xmlStr);
        return xmlDoc;
    };
} else {
    parseXml = function() { return null; }
}

var xml = parseXml("<foo>Stuff</foo>");
if (xml) {
    window.alert(xml.documentElement.nodeName);
}

Best Answer

Related Solutions

jQuery – XML Parsing Guide

JavaScript – How to Parse XML with jQuery

Related Question