Read Xml File Using Javascript
My Xml File Format Is as Below. 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...
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>