How to parse xml with namespaces using jQuery (and work for whole browser ..)?

Question

I need to parse an XML response from a web service using jQuery

http://code.jquery.com/jquery-1.11.0.min.js 

Here you are a sample of my XML

 <?xml version='1.0' encoding="ISO-8859-1" ?> <wfs:FeatureCollection xmlns:ms="http://mapserver.gis.umn.edu/mapserver" xmlns:wfs="http://www.opengis.net/wfs" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd http://mapserver.gis.umn.edu/mapserver http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/wfs/Numeri_Civici_2012.map&amp;SERVICE=WFS&amp;VERSION=1.0.0&amp;REQUEST=DescribeFeatureType&amp;TYPENAME=IN.NUMERICIVICI.2012&amp;OUTPUTFORMAT=XMLSCHEMA"> <gml:boundedBy> <gml:Box srsName="EPSG:4326"> <gml:coordinates>7.700007,44.802147 7.749396,44.849996</gml:coordinates> </gml:Box> </gml:boundedBy> <gml:featureMember> <ms:IN.NUMERICIVICI.2012 fid="IN.NUMERICIVICI.2012.2728384"> <gml:boundedBy> <gml:Box srsName="EPSG:4326"> <gml:coordinates>7.735138,44.810267 7.735138,44.810267</gml:coordinates> </gml:Box> </gml:boundedBy> <ms:boundary> <gml:Point srsName="EPSG:4326"> <gml:coordinates>7.735138,44.810267</gml:coordinates> </gml:Point> </ms:boundary> <ms:id>13800026457291</ms:id> <ms:nome>Borgata Tetti Sotto</ms:nome> <ms:civico>16</ms:civico> <ms:istat>01004041</ms:istat> <ms:cap>12030</ms:cap> <ms:comune>CARAMAGNA PIEMONTE</ms:comune> <ms:nome_ted> </ms:nome_ted> <ms:provincia>CUNEO</ms:provincia> <ms:regione>PIEMONTE</ms:regione> </ms:IN.NUMERICIVICI.2012> </gml:featureMember> <gml:featureMember> <ms:IN.NUMERICIVICI.2012 fid="IN.NUMERICIVICI.2012.2736621"> <gml:boundedBy> <gml:Box srsName="EPSG:4326"> <gml:coordinates>7.735397,44.812403 7.735397,44.812403</gml:coordinates> </gml:Box> </gml:boundedBy> <ms:boundary> <gml:Point srsName="EPSG:4326"> <gml:coordinates>7.735397,44.812403</gml:coordinates> </gml:Point> </ms:boundary> <ms:id>13800026457290</ms:id> <ms:nome>Borgata Tetti Sotto</ms:nome> <ms:civico>25</ms:civico> <ms:istat>01004041</ms:istat> <ms:cap>12030</ms:cap> <ms:comune>CARAMAGNA PIEMONTE</ms:comune> <ms:nome_ted> </ms:nome_ted> <ms:provincia>CUNEO</ms:provincia> <ms:regione>PIEMONTE</ms:regione> </ms:IN.NUMERICIVICI.2012> </gml:featureMember> 

I need to extract these fields into some js variables:

• ms: noma
• ms: civico
• ms: ISTAT
• ms: cap
• ms: ital

I also need to be sure that my code works correctly in IE, Firefox and Chrome.

I saw and tried several solutions that I found here in SO, but no one works.

Any suggestion is much appreciated!

Thank you in advance!

Cesare

Answer 1

You can iterate through XML elements using jQuery and find() , as with HTML. When specifying tag names, you must specify the namespace prefix in the selector.

 var xmlText = $('#featureData').text(), $xmlData = $.parseXML(xmlText), $features = $('featureMember', $xmlData), extractedFeatures = []; $features.each(function () { var $this = $(this), feature = {}, items = [ 'nome', 'civico', 'istat', 'cap', 'comune' ], item; for (var i = 0; i < items.length; i++) { item = items[i]; feature[item] = $this.find(item).text(); } extractedFeatures.push(feature); }); $('#output').text(JSON.stringify(extractedFeatures)); 

See jsFiddle play here

Answer 2

The correct solution is shown as the answer to this question.

Parse xml with namespaces using jQuery and work with all browsers.

Now it works on IE, FF and Chrome!

I hope this can be helpful to others.

Cesare