Read XML file using javascript

My XML file format is as below.

<markers> <marker> <type></type> <title></title> <address></address> <latitude></latitude> <longitude></longitude> <marker> <marker> <type></type> <title></title> <address></address> <latitude></latitude> <longitude></longitude> <marker> </markers> 

please suggest me how can i read all the "marker" element. I need to get value of all child element of the "marker"

Thanks

4 Answers

The code below will convert any XMLObject or string to a native JavaScript object. Then you can walk on the object to extract any value you want.

/** * Tries to convert a given XML data to a native JavaScript object by traversing the DOM tree. * If a string is given, it first tries to create an XMLDomElement from the given string. * * @param {XMLDomElement|String} source The XML string or the XMLDomElement prefreably which containts the necessary data for the object. * @param {Boolean} [includeRoot] Whether the "required" main container node should be a part of the resultant object or not. * @return {Object} The native JavaScript object which is contructed from the given XML data or false if any error occured. */ Object.fromXML = function( source, includeRoot ) { if( typeof source == 'string' ) { try { if ( window.DOMParser ) source = ( new DOMParser() ).parseFromString( source, "application/xml" ); else if( window.ActiveXObject ) { var xmlObject = new ActiveXObject( "Microsoft.XMLDOM" ); xmlObject.async = false; xmlObject.loadXML( source ); source = xmlObject; xmlObject = undefined; } else throw new Error( "Cannot find an XML parser!" ); } catch( error ) { return false; } } var result = {}; if( source.nodeType == 9 ) source = source.firstChild; if( !includeRoot ) source = source.firstChild; while( source ) { if( source.childNodes.length ) { if( source.tagName in result ) { if( result[source.tagName].constructor != Array ) result[source.tagName] = [result[source.tagName]]; result[source.tagName].push( Object.fromXML( source ) ); } else result[source.tagName] = Object.fromXML( source ); } else if( source.tagName ) result[source.tagName] = source.nodeValue; else if( !source.nextSibling ) { if( source.nodeValue.clean() != "" ) { result = source.nodeValue.clean(); } } source = source.nextSibling; } return result; }; String.prototype.clean = function() { var self = this; return this.replace(/(\r\n|\n|\r)/gm, "").replace(/^\s+|\s+$/g, ""); } 

You can use below script for reading child of the above xml. It will work with IE and Mozila Firefox both.

<script type="text/javascript"> function readXml(xmlFile){ var xmlDoc; if(typeof window.DOMParser != "undefined") { xmlhttp=new XMLHttpRequest(); xmlhttp.open("GET",xmlFile,false); if (xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType('text/xml'); } xmlhttp.send(); xmlDoc=xmlhttp.responseXML; } else{ xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.load(xmlFile); } var tagObj=xmlDoc.getElementsByTagName("marker"); var typeValue = tagObj[0].getElementsByTagName("type")[0].childNodes[0].nodeValue; var titleValue = tagObj[0].getElementsByTagName("title")[0].childNodes[0].nodeValue; } </script> 

If you get this from a Webserver, check out jQuery. You can load it, using the Ajax load function and select the node or text you want, using Selectors.

If you don't want to do this in a http environment or avoid using jQuery, please explain in greater detail.

You can do something like this to read your nodes.

Also you can find some explanation in this page

<script type="text/javascript"> var markers = null; $(document).ready(function () { $.get("File.xml", {}, function (xml){ $('marker',xml).each(function(i){ markers = $(this); }); }); }); </script>