Read XML file using javascript

Question

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

Hoverbear · Accepted Answer · 2015-07-08 17:00:25Z

8

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>

edited Jul 8, 2015 at 17:00

Hoverbear

1331 silver badge7 bronze badges

answered Apr 24, 2013 at 10:37

Jitendra

811 silver badge2 bronze badges

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

Comments

BYK · Accepted Answer · 2014-12-15 17:09:09Z

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, "");
}

Sorry about the "necro posting", but I think It'd be nice to put in some usage example.
@GiovanniDiToro - this code is ancient and uses some bad practices such as manipulating built-in global objects and even worse, their prototypes so I'd strongly recommend against not using it as a whole. I also seem to have made certain unsafe assumptions around array grouping etc. and don't really recall what those were by now :(

Tim Büthe · Accepted Answer · 2009-07-29 10:18:14Z

4

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.

edited Jul 29, 2009 at 10:18

answered Jul 29, 2009 at 10:12

Tim Büthe

63.9k17 gold badges96 silver badges130 bronze badges

2 Comments

Tim Büthe Over a year ago

Will this JavaScript run inside a browser? Then you need extensions to access files.

user10398 Over a year ago

I think ajax load function of jquery will do a decent job. Provided you know how to use jquery..or if you are in for a quick code..then the answer by BYK might be suitable.

luis_laurent · Accepted Answer · 2012-10-25 22:16:26Z

3

You can do something like this to read your nodes.

Also you can find some explanation in this page http://www.compoc.com/tuts/

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

edited Oct 25, 2012 at 22:16

answered Oct 24, 2012 at 18:01

luis_laurent

8142 gold badges13 silver badges32 bronze badges

Collectives™ on Stack Overflow

Read XML file using javascript

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related