Introduction
Hello! This post will show you how to open and show XML files in JavaScript for Web.
This week, I posted "How to Open a JSON File in JavaScript for Web", and I tried for XML (to research my little acknowledgments). For this reason, I posted this article to show "How to open an XML file in JavaScript for Web".
Background
I follow the line of my post and I read something of this:
Code
Now we can train with a local XML variable and parse the XML format into childNodes:
<!DOCTYPE html>
<html>
<head>
<title>XML Test</title>
</head>
<body>
<h1>XML Test</h1>
<h2>Create a string from a XML array.</h2>
<hr />
<p id="demo"></p>
<script>
function StringToXMLDom(sXML) {
var xmlDoc=null;
if (window.DOMParser) {
parser=new DOMParser();
xmlDoc=parser.parseFromString(sXML,"text/xml");
} else {
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(sXML);
}
return xmlDoc;
}
var XMLArray = "<bookstore>" +
"<book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book>" +
"<book>" +
"<title>La uruguaya</title>" +
"<author>Pedro Mairal</author>" +
"<year>2016</year>" +
"</book>" +
"</bookstore>";
var tbData = "";
var xmlData = StringToXMLDom(XMLArray);
if (XMLArray) {
var tmp = xmlData.getElementsByTagName("book");
for (var i = 0; i < tmp.length; i++) {
for (var j = 0; j < tmp[i].childNodes.length; j++) {
tbData += tmp[i].childNodes[j].tagName + ": "
+ tmp[i].childNodes[j].textContent + "<br />";
}
tbData += "<br />";
}
document.getElementById("demo").innerHTML = tbData;
} else {
document.getElementById("demo").innerHTML = "Error!";
}
</script>
</body>
</html>
Well, we can start coding something! Let's write an XML file (I saved it as Books.xml):
<bookstore>
<book>
<title>Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
</book>
<book>
<title>La uruguaya</title>
<author>Pedro Mairal</author>
<year>2016</year>
</book>
</bookstore>
Then we can write a WebPage with our JavaScript! Like this:
<!DOCTYPE html>
<html>
<head>
<title>XML Test</title>
</head>
<body>
<h1>XML Test</h1>
<h2>Create an array from XML string file.</h2>
<hr />
<p id="demo"></p>
<script>
function loadXML(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/xml");
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
} else {
callback("<bookstore><book>
<value>Nothing</value></book></bookstore>");
}
};
xobj.open("GET",
"Books.xml", true);
xobj.setRequestHeader("Access-Control-Allow-Origin","*");
xobj.send(null);
};
function StringToXMLDom(sXML) {
var xmlDoc=null;
if (window.DOMParser) {
parser=new DOMParser();
xmlDoc=parser.parseFromString(sXML,"text/xml");
} else {
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(sXML);
}
return xmlDoc;
}
loadXML(function(response) {
var tbData = "";
var xmlData = StringToXMLDom(response);
if (xmlData) {
var tmp = xmlData.getElementsByTagName("book");
for (var i = 0; i < tmp.length; i++) {
for (var j = 0; j < tmp[i].childNodes.length; j++) {
tbData += tmp[i].childNodes[j].tagName + ": "
+ tmp[i].childNodes[j].textContent + "<br />";
}
tbData += "<br />";
}
document.getElementById("demo").innerHTML = tbData;
} else {
document.getElementById("demo").innerHTML = "Error!";
}
});
</script>
</body>
</html>
That's It
It's a very quick scripting WebPage where we can handle local XML files. With this method, you can parse the XML into childNodes.
I hope that it'll be useful for you!
If you liked the post, spare some time to give me a vote/comment, it would be appreciated.
