How to parse XML using jQuery?

Question

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 ?

What do you mean by *how can I find the details of a node using this hierarchy Pages->pagename->controls->test* ? Please clarify. Also note that `Page !== page`. — Felix Kling, Aug 29 '11 at 09:22

score 42 · Accepted Answer · edited Jul 07 '20 at 22:11

42

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/

edited Jul 07 '20 at 22:11

Dan Atkinson

11,391
14
81
114

answered Aug 29 '11 at 09:13

Luwe

3,026
1
20
21

2

Gosh... Question was "how can I find the details of a node using this hierarchy Pages->pagename->controls->test ?" not "How can I parse XML file" Am I right or am I right ? – WTK Aug 29 '11 at 09:15
Not possible without plugins, see my edit. **Edit** Ah, you're not the one who asked the question. You're right of course, but that doesn't mean we can't make other suggestions. – Luwe Aug 29 '11 at 09:16
3

@WTK: The title is *How to parse xml using jquery*. What the OP means with the other sentence, I actually don't know... – Felix Kling Aug 29 '11 at 09:24
Hi, what is exact meaning of the line $xml = $( xml ) ? – Costa Mirkin Nov 15 '16 at 21:52
jQuery.parseXML( data: string ) a well-formed (XML string) to be parsed, not yourfile.xml. – Shawn Wu Jan 16 '23 at 01:33

Rafay · Answer 2 · 2011-08-29T09:25:53.633

19

you can use .parseXML

var xml='<Pages>
          <Page Name="test">
           <controls>
              <test>this is a test.</test>
           </controls>  
          </Page>
          <page Name = "User">
           <controls>
             <name>Sunil</name>
           </controls>
          </page>
        </Pages>';

jquery

    xmlDoc = $.parseXML( xml ),
    $xml = $( xmlDoc );
    $($xml).each(function(){
       alert($(this).find("Page[Name]>controls>name").text());
     });

here is the fiddle http://jsfiddle.net/R37mC/1/

edited Aug 29 '11 at 09:25

answered Aug 29 '11 at 09:12

Rafay

30,950
5
68
101

4

Note: You'll want to add backslashes to the ends of the XML lines or the Javascript interpreter won't accept it as one string. – Jens Roland Aug 29 '11 at 09:29
@Jens Roland yup but in the fiddle i removed the white spaces, and tnx for the info – Rafay Aug 29 '11 at 09:38

Jens Roland · Answer 3 · 2011-08-29T09:31:27.007

I assume you are loading the XML from an external file. With $.ajax(), it's quite simple actually:

$.ajax({
    url: 'xmlfile.xml',
    dataType: 'xml',
    success: function(data){
        // Extract relevant data from XML
        var xml_node = $('Pages',data);
        console.log( xml_node.find('Page[Name="test"] > controls > test').text() );
    },
    error: function(data){
        console.log('Error loading XML data');
    }
});

Also, you should be consistent about the XML node naming. You have both lowercase and capitalized node names (<Page> versus <page>) which can be confusing when you try to use XML tree selectors.

score 10 · Answer 4 · edited Mar 02 '17 at 14:30

10

$xml = $( $.parseXML( xml ) );

$xml.find("<<your_xml_tag_name>>").each(function(index,elem){
    // elem = found XML element
});

edited Mar 02 '17 at 14:30

Viktor Koncsek

564
3
13

answered Apr 02 '13 at 03:21

Vicky

9,515
16
71
88

this solution is really good, could you improve it with complete code? Thanks a lot! +1 – Leandro Bardelli Oct 22 '13 at 17:06

Felix Kling · Answer 5 · 2011-08-29T09:22:54.780

2

Have a look at jQuery's .parseXML() ^[docs]:

var $xml = $(jQuery.parseXML(xml));

var $test = $xml.find('Page[Name="test"] > controls > test');

edited Aug 29 '11 at 09:22

answered Aug 29 '11 at 09:12

Felix Kling

795,719
175
1,089
1,143

score 1 · Answer 6 · edited Jan 23 '17 at 11:46

I went the way of jQuery's .parseXML() however found that the XML path syntax of 'Page[Name="test"] > controls > test' wouldn't work (if anyone knows why please shout out!).

Instead I chained together the individual .find() results into something that looked like this:

$xmlDoc.find('Page[Name="test"]')
       .find('contols')
       .find('test')

The result achieves the same as what I would expect the one shot find.

score 0 · Answer 7 · answered Aug 29 '11 at 09:09

0

First thing that pop-up in google results http://think2loud.com/224-reading-xml-with-jquery/ There's no simple way to access xml structure (like you described Pages->pagename->controls->test) in jQuery without any plugins.

answered Aug 29 '11 at 09:09

WTK

16,583
6
35
45

How to parse XML using jQuery?

7 Answers7

Linked

Related