Convert XML to String and append to page

Question

I want to convert an xml element like this:

<asin>​B0013FRNKG​</asin>​

to string in javascript

I used XMLSerializer:

new XMLSerializer().serializeToString(xml);

the string only shows on alert() and in the console. On the page it just says

[object Element][object Element]

I want to get the string.

Fiorin

do you want to get "<asin>​B0013FRNKG​</asin>​", or "B0013FRNKG"? – Zeebrugge

Answer 1

You haven't told us how you go about displaying that object. XMLSerializer works on DOM nodes, so your object has to be added somewhere, for example:

document.getElementById('SomeDiv').appendChild(xml); 

and if you just want the full xml string to be displayed:

var xmlText = new XMLSerializer().serializeToString(xml);
var xmlTextNode = document.createTextNode(xmlText);
var parentDiv = document.getElementById('SomeDiv');
parentDiv.appendChild(xmlTextNode);

Buzz

This worked! Thank you. I didnt know about the createTextNode part. I thought XML could be used like JSON. – Fiorin

Answer 2

<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>    

use this in case of IE for browser compatibility issues.

Gaut

I've been using exactly this code for a while but I've come across a client running IE10 in Win7. They have "use natvie XMLHTTP" checked in Internet Options (not that that is relevant in this case). However "window.ActiveXObject" evaluates to truthy but xmlData.xml returns undefined. Any idea why? – Shikari

Answer 3

function getXmlString(xml) {
  if (window.ActiveXObject) { return xml.xml; }
  return new XMLSerializer().serializeToString(xml);
}
alert(getXmlString(xml));

Hone

Answer 4

Did you try enclosing the result like in…

(new XMLSerializer()).serializeToString(xml)

Also, I'd use console instead to see the content better:

console.log((new XMLSerializer()).serializeToString(xml));

Seringapatam

Answer 5

If the DOM element <asin>​B0013FRNKG​</asin>​ is stored in the object element, then you can access the value using:

element.textContent

Zeebrugge

Answer 6

follow this to print,append data from xml data stored as string inside javscript

txt="<papers>"+"<paper>"+
 "<author>athor name</author>"+
"<title>title</title>"+
"<path>path</path>"+
"<track>which tack</track>"+
 "</paper>"+
"<paper>"+
"<author>athor name</author>"+
"<title>title</title>"+
"<path>path</path>"+
"<track>which tack</track>"+
"</paper>"+
"<paper>"+
"<author>athor name</author>"+
"<title>title</title>"+
"<path>path</path>"+
"<track>which tack</track>"+
"</paper>"+
"<papers>";
if (window.DOMParser)
  {
      parser=new DOMParser();
  xmlDoc=parser.parseFromString(txt,"text/xml");

   }
   else // Internet Explorer
    {
     xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
     xmlDoc.async=false;
     xmlDoc.loadXML(txt);
    }

x=xmlDoc.getElementsByTagName("paper"); 
for (var i = 0; i < x.length; i++) {  
    var athor =x[i].childNodes[0].firstChild.nodeValue;
    var title = x[i].childNodes[1].firstChild.nodeValue;
    var path = x[i].childNodes[2].firstChild.nodeValue;
    var tack =x[i].childNodes[3].firstChild.nodeValue;
    //do something with these values...
    //each iteration gives one paper details    
    var xml=document.getElementById("element_id");//<div id="element_id"></div>
    var li = document.createElement("br");// create a new <br>  
    newlink = document.createElement('A'); // creating an <a> element
    newlink.innerHTML = athor;// adding <a>athor value here</a>
    newlink.setAttribute('href', path);// <a href="path"></a>

    newlink.appendChild(li);// <a href="path">athor</a><br>
    document.getElementById("element_id").appendChild(newlink);//finaly it becomes <div id="element_id"><a href="path">athor</a><br></div>


}

Cerement