How to pull data from am XML file and show it in html table
here is my code (taken from an old post). what am I doing wrong?
1. The first file is test.xml, xml for storing data.
<?xml version="1.0"?>
<item>
<entry>
<Date>1/01/2001</Date>
<ProductName>milk</ProductName>
<Quantity>10</Quantitty>
<GrossPrice>50</GrossPrice>
<Profit>10</Profit>
</entry>
<entry>
<Date>2/10/2007</Date>
<ProductName>milk</ProductName>
<Quantity>20</Quantitty>
<GrossPrice>100</GrossPrice>
<Profit>20</Profit>
</entry>
</item>
2. The second second is demo.html to display the data stored in the XML file. This html has an input tag as text and a submit button. OnClick on the submit button, it should search for the input you entered and show the output.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
Product Name: <input type="text" name="ProductName" id="input">
<br />
<input type="submit" value="Submit" onClick="searchXML()">
<br />
<br />
<div id="results">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}
function searchXML()
{
xmlDoc=loadXMLDoc("test.xml");
x=xmlDoc.getElementsByTagName("ProductName");
input = document.getElementById("input").value;
size = input.length;
if (input == null || input == "")
{
document.getElementById("results").innerHTML= "Please enter a Product Name!";
return false;
}
for (i=0;i<x.length;i++)
{
startString = ProductName.substring(0,size);
if (startString.toLowerCase() == input.toLowerCase())
{
date=xmlDoc.getElementsByTagName("Date")[i].childNodes[0].nodeValue;
product=xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue;
quantity=xmlDoc.getElementsByTagName("Quantity")[i].childNodes[0].nodeValue;
grossprice=xmlDoc.getElementsByTagName("GrossPrice")[i].childNodes[0].nodeValue;
profit=xmlDoc.getElementsByTagName("Profit")[i].childNodes[0].nodeValue;
divText = "<h1>The contact details are:</h1><br /><table border=1><tr><th>Date</th><th>Product</th><th>Quantity</th><th>Gross Price</th><th>Profit</th></tr>" + "<tr><td>" + date + "</td><td>" + product + "</td><td>" + quantity + "</td><td>" + grossprice + "</td><td>" + profit + "</td></tr>" + "</table>";
break;
}
else
{
divText = "<h2>The product does not exist.</h2>";
}
}
document.getElementById("results").innerHTML= divText;
}
</script>
</body>
</html>
I am getting error on chrome like ---
XMLHttpRequest cannot load file: /// C: /Users/chandan/Desktop/demo/test/test.xml. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. demoNew.html: 28 Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Could not load 'file: /// C: /Users/chandan/Desktop/demo/test/test.xml'.
However, when I run this in firefox it downloads the xml file but does not show the result, giving an error on line 44 of the Html ..
how to fix?
source to share
you are trying to access a local file and most browsers (like recent Chrome) have disabled it by default. A clean and HTML5 friendly way to do it through a dialog box and FileAPI
http://www.html5rocks.com/en/tutorials/file/dndfiles/
Here's one example to accomplish your task: a dialog box allows you to select an xml file and display the information as you see fit.
My main source: https://github.com/MounirMesselmeni/html-fileapi
Here's how you can adapt the code
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>HTML5 File API</title>
</head>
<body >
<div>
<form class="form-horizontal well">
<legend>
<h3>
<div id="title">HTML5 File API</div>
</h3>
</legend>
<fieldset>
<label for="xmlFileinput"> <strong>XML File:</strong>
</label>
<input type="file" id="xmlFileinput" onchange="handleFiles(this.files)"
accept=".xml">
</div>
</fieldset>
Product Name: <input type="text" name="ProductName" id="input">
</form>
<div id="output">
</div>
<div id="results">
</div>
</div>
<br>
<br>
<footer>
<center>
<p>© Gabriel Ter-Minassian + Mounir Messelmeni 2012</p>
</center>
</footer>
<script type="text/javascript">
function handleFiles(files) {
// Check for the various File API support.
if (window.FileReader) {
// FileReader are supported.
getAsText(files[0]);
} else {
alert('FileReader are not supported in this browser.');
}
}
function getAsText(fileToRead) {
var reader = new FileReader();
// Handle errors load
reader.onload = loadHandler;
reader.onerror = errorHandler;
// Read file into memory as UTF-8
reader.readAsText(fileToRead);
}
function loadHandler(event) {
var xml = event.target.result;
//alert(xml);
doc=StringtoXML(xml);
searchXML(doc);
}
function errorHandler(evt) {
if(evt.target.error.name == "NotReadableError") {
alert("Canno't read file !");
}
}
function StringtoXML(text){
if (window.ActiveXObject){
var doc=new ActiveXObject('Microsoft.XMLDOM');
doc.async='false';
doc.loadXML(text);
} else {
var parser=new DOMParser();
var doc=parser.parseFromString(text,'text/xml');
}
return doc;
}
function searchXML(xmlDoc)
{
x=xmlDoc.getElementsByTagName("ProductName");
input = document.getElementById("input").value;
size = input.length;
divText=""
if (input == null || input == "")
{
document.getElementById("results").innerHTML= "Please enter a Product Name!";
return false;
}
for (i=0;i<x.length;i++)
{
startString = x[i].childNodes[0].nodeValue;
if (startString.toLowerCase() == input.toLowerCase())
{
date=xmlDoc.getElementsByTagName("Date")[i].childNodes[0].nodeValue;
product=xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue;
quantity=xmlDoc.getElementsByTagName("Quantity")[i].childNodes[0].nodeValue;
grossprice=xmlDoc.getElementsByTagName("GrossPrice")[i].childNodes[0].nodeValue;
profit=xmlDoc.getElementsByTagName("Profit")[i].childNodes[0].nodeValue;
if (divText==="")
{
divText="<h1>The contact details are:</h1><br /><table border=1>";
divText+="<tr><th>Date</th><th>Product</th><th>Quantity</th><th>Gross Price</th><th>Profit</th></tr>";
}
divText += "<tr><td>" + date + "</td><td>" + product + "</td><td>" + quantity + "</td><td>" + grossprice + "</td><td>" + profit + "</td>"+"</tr>";
}
}
if (divText=="")
{
divText = "<h2>The product does not exist.</h2>";
}
else
{
divText+="</table>";
}
document.getElementById("results").innerHTML= divText;
}
</script>
</body>
</html>
Hope it helps,
source to share