Explain how to fetch data from xml to html
Answers
Answered by
1
.First one test.xml, a xml file to store 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.Second one is demo.html, to show the data stored in html. which has an input tag as Text and a submit button. OnClick on the submit button, it should search for the input given 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>
What is wrong in my code? Why Data is not showing?
<?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.Second one is demo.html, to show the data stored in html. which has an input tag as Text and a submit button. OnClick on the submit button, it should search for the input given 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>
What is wrong in my code? Why Data is not showing?
Similar questions