Convert xml to string with jQuery

Question

I'm loading an xml file with jQuery ajax loader, and need to convert it to a string so that I can save it out again using PHP post variables. What is the best way to do this?

<script type='text/javascript'>

jQuery.ajax({
    type: "GET",
    url: "data.xml",
    dataType: "xml",
    success: parseXML
    });


function parseXML(xml) {

    var xml_string = jQuery(xml).text();  // (This doesn't work- returns tagless, unformatted text) 
    alert(xml_string);

}

</script>

Are you looking to extract specific strings from the xml, or simply get the xml string that is returned from the AJAX request? — Ryan Gross
– Ryan Gross, Commented Jun 28, 2011 at 13:42
@Ryan- the former- although I will be saving off the entire xml doc, I need to perform manipulations on it first, so I need to bring it in as xml — Yarin
– Yarin, Commented Jun 28, 2011 at 13:46
@Blindy- You can't use .html() on xml, and just xml returns = [object Document] — Yarin
– Yarin, Commented Jun 28, 2011 at 13:49
If you don't need to parse the XML and just get the text, change the dataType to 'text' — Ahmed Nuaman
– Ahmed Nuaman, Commented Jun 28, 2011 at 14:22

Yarin · Accepted Answer · 2011-06-28 14:07:47Z

61

Here it is:

<script type='text/javascript'>

function xmlToString(xmlData) { 

    var xmlString;
    //IE
    if (window.ActiveXObject){
        xmlString = xmlData.xml;
    }
    // code for Mozilla, Firefox, Opera, etc.
    else{
        xmlString = (new XMLSerializer()).serializeToString(xmlData);
    }
    return xmlString;
}   

</script>

Taken from here

answered Jun 28, 2011 at 14:07

Yarin

186k156 gold badges414 silver badges527 bronze badges

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

3 Comments

Justin Ethier Over a year ago

I noticed I got a security error in Firefox when passing a jQuery object to this function, but it seemed to work fine when passing in an XML object.

SpaceDust__ Over a year ago

NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMSerializer.serializeToString] error on firefox, does not work on IE either

BobbyTables Over a year ago

for those in modern days looking at this solution, the browser test should not be for IE, it should be for the presence of the XMLSerializer, since newer IE has this, but not older.

Gojko Adzic · Accepted Answer · 2013-04-08 17:43:37Z

17

this works around the .innerHtml problem.

$('<div>').append(xmlObj).html()

answered Apr 8, 2013 at 17:43

Gojko Adzic

1,25110 silver badges10 bronze badges

3 Comments

Richard Over a year ago

This is good, but it kills the casing on the tags. (Particularly noticeable on SOAP requests.) <LogOnResponse> because <logonresponse>

Michael Gollmick Over a year ago

If you have only lowercase tags in your DOM tree, this one is better than the Serializer approach as the Serializer may modify the tags with its own namespace at will. In my particular case the Serializer approach did not return the correct xml string but the $.html approach did.

Laxminarayana Challagonda Over a year ago

Michael can u please explain the $.html struggling a lot with case sensitive

Ben · Accepted Answer · 2013-06-04 22:31:58Z

This worked for me (credit: http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/section3.html):

 function getXmlAsString(xmlDom){
      return (typeof XMLSerializer!=="undefined") ? 
           (new window.XMLSerializer()).serializeToString(xmlDom) : 
           xmlDom.xml;
 }

Here's an example that retrieves information about a column from a SharePoint list:

var soapEnv =
    "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
        <soapenv:Body> \
             <GetList xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                <rowLimit>0</rowLimit> \
                <listName>Announcements</listName> \
            </GetList> \
        </soapenv:Body> \
    </soapenv:Envelope>";


jQuery.support.cors = true; 
$.ajax({
    url: "http://sharepoint/_vti_bin/lists.asmx",
    type: "POST",
    dataType: "xml",
    data: soapEnv,
    contentType: "text/xml; charset=\"utf-8\"",
    complete: function(xData){
        var xmlDoc = $.parseXML(xData.responseText), $xml = $(xmlDoc)           
        $Fields = $xml.find("Field");
        $field = $Fields.filter("Field[Name='Title']")[0];

        //Show the xml
        alert(getXmlAsString( xmlDoc ));
        alert(getXmlAsString( $field ));
    }
});

Alexis Wilke · Accepted Answer · 2015-01-29 07:03:35Z

Spent much time for this problem. With IE 9 above functions should work in another way. Because in IE9 xmlData[0].xml doesn't work (IE still likes jokes). And we must use XMLSerializer with IE v9 and higher (?!)

function xmlToString(xmlData) { // this functions waits jQuery XML 

    var xmlString = undefined;

    if (window.ActiveXObject){
        xmlString = xmlData[0].xml;
    }

    if (xmlString === undefined)
    {
        var oSerializer = new XMLSerializer();
        xmlString = oSerializer.serializeToString(xmlData[0]);
    }

    return xmlString;
}

And example of using it with jQuery 1.8.2 (1.6.4 works too).

   $.ajax(
        {
            type: type,
            url: url,
            data: values,
            dataType: 'html', //get response in plain text
            success: function(response) {    

                //transform it to jQuery XML DOM
                var xmlDoc = jQuery.parseXML(response);
                var xml = $(xmlDoc);

                //do some search and so on
                var divtag = xml.find('div[id="content"]');
                var divtxt = xmlToString(divtag);

                //consume it
                alert(divtxt);
                $('#main-content').html(divtxt);

            }
        });

good man! this code var Serializer = new XMLSerializer(); xmlString = oSerializer.serializeToString(xmlData[0]); parses XML to string in IE9

Andy Widdess · Accepted Answer · 2012-06-29 11:05:26Z

Had the same problem - xmlString was returning an empty string. Adding [0] to jQuery selector helped to address XML-type object:

Your Javascript:

<script type='text/javascript'>
function xmlToString(xmlData) 
{
    var xmlString;
    //IE
    if (window.ActiveXObject){
        xmlString = xmlData.xml;
    }
    // code for Mozilla, Firefox, Opera, etc.
    else{
        xmlString = (new XMLSerializer()).serializeToString(xmlData[0]);
    }
    return xmlString;
}   
</script>

jQuery:

<script>
$(function(){ 
  xmlData = "<tag>just a sample here</tag>"; 
  xmlData= $(xmlData); 
  if (window.ActiveXObject){ 
    var xmlString = xmlData.xml; 
  } else {
    var oSerializer = new XMLSerializer(); 
    var xmlString = oSerializer.serializeToString(xmlData[0]);
  } 
  console.log(xmlString); 
})
</script>

Actually, to properly parse XML with jQuery you want to use jQuery.parseXML(xml).
after let inputXObject = $.parseXML(...) created an object, (new XMLSerializer()).serializeToString(inputXObject) returns just xml, not formatted (windows 7, Chrome, Chrome console as well)

Sujan Shrestha · Accepted Answer · 2013-02-25 08:38:33Z

1

You can use following function:

function getXmlString($xmlObj)
{   
    var xmlString="";
    $xmlObj.children().each(function(){
        xmlString+="<"+this.nodeName+">";
        if($(this).children().length>0){
            xmlString+=getXmlString($(this));
        }
        else
            xmlString+=$(this).text();
        xmlString+="</"+this.nodeName+">";
    });
    return xmlString;
}

Pass jquery xml object to this function

answered Feb 25, 2013 at 8:38

Sujan Shrestha

1911 silver badge4 bronze badges

1 Comment

epeleg Over a year ago

this will have terrible performance with large trees. If you insist on serializing yourself the you should push the text fragments into an array and only .join('') once at the end.

Bo Hu · Accepted Answer · 2018-03-28 07:58:43Z

function serializeXML(xmldom) {
  if (typeof XMLSerializer != "undefined") {
    return (new XMLSerializer()).serializeToString(xmldom);
  } else if (typeof xmldom.xml != "undefined") {
    return xmldom.xml;
  } else {
    throw new Error("Could not serialize XML DOM.");
  }
}

// test
var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>",
  xmlDoc = $.parseXML(xml),
  xmlStr = serializeXML(xmlDoc);
console.log("xmlStr: " + xmlStr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Alexis Wilke · Accepted Answer · 2015-01-29 08:54:30Z

-1

An old post I know but thought I would suggest this:

xml[0].outerHTML

edited Jan 29, 2015 at 8:54

Alexis Wilke

21.2k11 gold badges110 silver badges183 bronze badges

answered Jul 14, 2014 at 17:19

Mr AH

1,1083 gold badges11 silver badges24 bronze badges

3 Comments

Alexis Wilke Over a year ago

Why would an XML document have a field named outerHTML?

Armand Over a year ago

It's not an XML document, it's a jQuery object.

Sasha Bond Over a year ago

xml object does not have it.. you can use xml.documentElement.outerHTML, but it returns non formatted xml string

Alexis Wilke · Accepted Answer · 2015-01-29 08:56:36Z

-1

In my case

if(window.ActiveXObject){
    xmlString = xmlData.xml;
}

Is not working. This is issue with IE10.

So I am able to fix this issue as follows:

if(window.ActiveXObject){
    xmlString = xmlData.attr('xml');
}

And working fine with any browser.

edited Jan 29, 2015 at 8:56

Alexis Wilke

21.2k11 gold badges110 silver badges183 bronze badges

answered Sep 27, 2013 at 8:27

Ajeet Kumar Singh

572 bronze badges

Comments

Alexis Wilke · Accepted Answer · 2015-01-29 08:55:20Z

-2

Just access xml as attribute value of jQuery object. as simple as that.

edited Jan 29, 2015 at 8:55

Alexis Wilke

21.2k11 gold badges110 silver badges183 bronze badges

answered Dec 31, 2013 at 10:39

Purushotham Racharla

1

1 Comment

Mickäel A. Over a year ago

Should be a comment, as simple as that. If you answer, at least, give an example.

Collectives™ on Stack Overflow

Convert xml to string with jQuery

10 Answers 10

3 Comments

3 Comments

Comments

1 Comment

2 Comments

1 Comment

Comments

3 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

3 Comments

3 Comments

Comments

1 Comment

2 Comments

1 Comment

Comments

3 Comments

Comments

1 Comment

Linked

Related