parsing an xml with node elements using jquery

Question

I have an xml like below I am trying to parse using jquery and get something like i wrote below java script to parse it.I have tried below code but i am able to get location not in below format as i expect.

Expected Result:

S1:E1:https://location1
S2:E2:https://location1

xml:

<Country>
    <State>
        <id>S1</id>    
        <City>
            <E1>    
               <location>https://location1</location>
            </E1>    
        </City>
        <County>
            <E2>    
               <location>https://location2</location>            
            </E2>
        </County>
    </State>    
    <State>
        <id>S2</id>
        <City>
            <E1>    
               <location>https://location3</location>
            </E1>    
        </City>
        <County>
            <E2>    
               <location>https://location4</location>            
            </E2>    
        </County>    
    </State>
</Country>

code

var container = $( document.body );    
var xml = '<Country> <State> <id>S1</id> <City> <E1> <location>https://location1</location> </E1> </City> <County> <E2> <location>https://location2</location> </E2> </County> </State> <State> <id>S2</id> <City> <E1> <location>https://location3</location> </E1> </City> <County> <E2> <location>https://location4</location> </E2> </County> </State> </Country>',
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$location = $xml.find( 'location' );    
container.append( $("<p/>", { "text" : $location.text() }) );

Rohan Kumar · Accepted Answer · 2014-12-04 08:40:03Z

1

Try it like,

var container = $( document.body );

var xml = '<Country> <State> <id>S1</id> <City> <E1> <location>https://location1</location> </E1> </City> <County> <E2> <location>https://location2</location> </E2> </County> </State> <State> <id>S2</id> <City> <E1> <location>https://location3</location> </E1> </City> <County> <E2> <location>https://location4</location> </E2> </County> </State> </Country>',
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$location = $xml.find( 'location' );   // will return all location elements     
$location.each(function(){
    container.append( $("<p/>", { "text" : $(this).text() }) ); 
});

Demo

Updated code to display result with ID

var container = $(document.body);

var xml = '<Country> <State> <id>S1</id> <City> <E1> <location>https://location1</location> </E1> </City> <County> <E2> <location>https://location2</location> </E2> </County> </State> <State> <id>S2</id> <City> <E1> <location>https://location3</location> </E1> </City> <County> <E2> <location>https://location4</location> </E2> </County> </State> </Country>',
    xmlDoc = $.parseXML(xml),
    $xml = $(xmlDoc),
    $location = $xml.find('location'); // will return all location elements     
$location.each(function () {
    container.append($("<p/>", {
        "text": 
            $(this).closest('State').find('id').text() + ':' + // get State ID like S1,S2
            $(this).closest('City').find(':first-child').prop('tagName') + ':' + // get City's location tag like E1,E2
            $(this).text() // get the location text like location1,location2....
    }));
});

Updated Demo

edited Dec 4, 2014 at 8:40

answered Dec 4, 2014 at 8:22

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2656713 Over a year ago

Thanks but i want to know from where this location came from eg: S1:E1:location1 S2:E2:location4

Rohan Kumar Over a year ago

@user2656713 see my updated answer, you need to make the XML in a format to get proper result for location2 and location4, currently it shows undefined. You can use a if-condition to by pass when the location tag doesn't exists.

Collectives™ on Stack Overflow

parsing an xml with node elements using jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related