This code is very useful Extract XML Data using JavaScript.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Extract XML Data using JavaScript </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Extract XML Data using JavaScript</title>
<style>
#books
{
font:13px Arial;
width:590px;
text-align:center;
border:solid 1px #000;
overflow:hidden;
}
#books div
{
width:180px;
text-align:left;
border:solid 1px #000;
margin:1px;
padding:2px 5px;
}
.col1 {float:left;clear:both;}
.col2 {float:left;}
.col4 {float:right;}
</style>
</head>
<body>
<div id="books"></div>
<script type="text/javascript">
var oXHR = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
function reportStatus() {
if (oXHR.readyState == 4) // REQUEST COMPLETED.
showTheList(this.responseXML); // ALL SET. NOW SHOW XML DATA.
}
oXHR.onreadystatechange = reportStatus;
oXHR.open("GET", "lib.xml", true);
// true = ASYNCHRONOUS REQUEST (DESIRABLE), false = SYNCHRONOUS REQUEST.
oXHR.send();
function showTheList(xml) {
var divBooks = document.getElementById('books'); // THE PARENT DIV.
var Book_List = xml.getElementsByTagName('List'); // THE XML TAG NAME.
for (var i = 0; i < Book_List.length; i++) {
// CREATE CHILD DIVS INSIDE THE PARENT DIV.
var divLeft = document.createElement('div');
divLeft.className = 'col1';
divLeft.innerHTML = Book_List[i].getElementsByTagName("BookName")[0].childNodes[0].nodeValue;
var divRight = document.createElement('div');
divRight.className = 'col2';
divRight.innerHTML = Book_List[i].getElementsByTagName("Category")[0].childNodes[0].nodeValue;
var divRightnew = document.createElement('div');
divRightnew.className = 'col4';
divRightnew.innerHTML = Book_List[i].getElementsByTagName("Price")[0].childNodes[0].nodeValue;
// ADD THE CHILD TO THE PARENT DIV.
divBooks.appendChild(divLeft);
divBooks.appendChild(divRight);
divBooks.appendChild(divRightnew);
}
};
</script>
</body>
</html>
After create xml file "lib.xml"
<?xml version="1.0"?>
<!-- Last edited by http://encodedna.com -->
<Library>
<List>
<BookName>Computer Architecture</BookName>
<Category>Computers</Category>
<Price>125.60</Price>
</List>
<List>
<BookName>Advanced Composite Materials</BookName>
<Category>Science</Category>
<Price>172.56</Price>
</List>
<List>
<BookName>Asp.Net 4 Blue Book</BookName>
<Category>Programming</Category>
<Price>56.00</Price>
</List>
<List>
<BookName>Stategies Unplugged</BookName>
<Category>Science</Category>
<Price>99.99</Price>
</List>
<List>
<BookName>Teaching Science</BookName>
<Category>Science</Category>
<Price>164.10</Price>
</List>
<List>
<BookName>Challenging Times</BookName>
<Category>Business</Category>
<Price>150.70</Price>
</List>
<List>
<BookName>Circuit Bending</BookName>
<Category>Science</Category>
<Price>112.00</Price>
</List>
<List>
<BookName>Popular Science</BookName>
<Category>Science</Category>
<Price>210.40</Price>
</List>
<List>
<BookName>ADOBE Premiere</BookName>
<Category>Computers</Category>
<Price>62.20</Price>
</List>
</Library>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Extract XML Data using JavaScript </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Extract XML Data using JavaScript</title>
<style>
#books
{
font:13px Arial;
width:590px;
text-align:center;
border:solid 1px #000;
overflow:hidden;
}
#books div
{
width:180px;
text-align:left;
border:solid 1px #000;
margin:1px;
padding:2px 5px;
}
.col1 {float:left;clear:both;}
.col2 {float:left;}
.col4 {float:right;}
</style>
</head>
<body>
<div id="books"></div>
<script type="text/javascript">
var oXHR = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
function reportStatus() {
if (oXHR.readyState == 4) // REQUEST COMPLETED.
showTheList(this.responseXML); // ALL SET. NOW SHOW XML DATA.
}
oXHR.onreadystatechange = reportStatus;
oXHR.open("GET", "lib.xml", true);
// true = ASYNCHRONOUS REQUEST (DESIRABLE), false = SYNCHRONOUS REQUEST.
oXHR.send();
function showTheList(xml) {
var divBooks = document.getElementById('books'); // THE PARENT DIV.
var Book_List = xml.getElementsByTagName('List'); // THE XML TAG NAME.
for (var i = 0; i < Book_List.length; i++) {
// CREATE CHILD DIVS INSIDE THE PARENT DIV.
var divLeft = document.createElement('div');
divLeft.className = 'col1';
divLeft.innerHTML = Book_List[i].getElementsByTagName("BookName")[0].childNodes[0].nodeValue;
var divRight = document.createElement('div');
divRight.className = 'col2';
divRight.innerHTML = Book_List[i].getElementsByTagName("Category")[0].childNodes[0].nodeValue;
var divRightnew = document.createElement('div');
divRightnew.className = 'col4';
divRightnew.innerHTML = Book_List[i].getElementsByTagName("Price")[0].childNodes[0].nodeValue;
// ADD THE CHILD TO THE PARENT DIV.
divBooks.appendChild(divLeft);
divBooks.appendChild(divRight);
divBooks.appendChild(divRightnew);
}
};
</script>
</body>
</html>
After create xml file "lib.xml"
<?xml version="1.0"?>
<!-- Last edited by http://encodedna.com -->
<Library>
<List>
<BookName>Computer Architecture</BookName>
<Category>Computers</Category>
<Price>125.60</Price>
</List>
<List>
<BookName>Advanced Composite Materials</BookName>
<Category>Science</Category>
<Price>172.56</Price>
</List>
<List>
<BookName>Asp.Net 4 Blue Book</BookName>
<Category>Programming</Category>
<Price>56.00</Price>
</List>
<List>
<BookName>Stategies Unplugged</BookName>
<Category>Science</Category>
<Price>99.99</Price>
</List>
<List>
<BookName>Teaching Science</BookName>
<Category>Science</Category>
<Price>164.10</Price>
</List>
<List>
<BookName>Challenging Times</BookName>
<Category>Business</Category>
<Price>150.70</Price>
</List>
<List>
<BookName>Circuit Bending</BookName>
<Category>Science</Category>
<Price>112.00</Price>
</List>
<List>
<BookName>Popular Science</BookName>
<Category>Science</Category>
<Price>210.40</Price>
</List>
<List>
<BookName>ADOBE Premiere</BookName>
<Category>Computers</Category>
<Price>62.20</Price>
</List>
</Library>
No comments:
Post a Comment