Search XML with JavaScript and Display Results in Table
The following is what I used to fix the issues I was having. One problem I was having is testing this locally. It will not work. This also is pending a message if no contact is found. I will update when I find the solution.
UPDATE: Solution found. See updated code below:
<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("Contact.xml");
x=xmlDoc.getElementsByTagName("firstname");
input = document.getElementById("input").value;
size = input.length;
if (input == null || input == "")
{
document.getElementById("results").innerHTML= "Please enter a character or name!";
return false;
}
for (i=0;i<x.length;i++)
{
startString = firstname.substring(0,size);
if (startString.toLowerCase() == input.toLowerCase())
{
firstname=xmlDoc.getElementsByTagName("firstname")[i].childNodes[0].nodeValue;
lastname=xmlDoc.getElementsByTagName("lastname")[i].childNodes[0].nodeValue;
phone=xmlDoc.getElementsByTagName("phone")[i].childNodes[0].nodeValue;
street=xmlDoc.getElementsByTagName("street")[i].childNodes[0].nodeValue;
city=xmlDoc.getElementsByTagName("city")[i].childNodes[0].nodeValue;
state=xmlDoc.getElementsByTagName("state")[i].childNodes[0].nodeValue;
postcode=xmlDoc.getElementsByTagName("postcode")[i].childNodes[0].nodeValue;
divText = "<h1>The contact details are:</h1><br /><table border=1><tr><th>First Name</th><th>Last Name</th><th>Phone</th><th>Street</th><th>City</th><th>State</th><th>Postcode</th></tr>" + "<tr><td>" + firstname + "</td><td>" + lastname + "</td><td>" + phone + "</td><td>" + street + "</td><td>" + city + "</td><td>" + state + "</td><td>" + postcode + "</td></tr>" + "</table>";
break;
}
else
{
divText = "<h2>The contact does not exist.</h2>";
}
}
document.getElementById("results").innerHTML= divText;
}
</script>
My html body:
<body>
First Name: <input type="text" name="firstname" id="input">
<br />
<input type="submit" value="Submit" onClick="searchXML()">
<br />
<br />
<div id="results">
</div>
</body>
I hope this can help someone else out.
Curley5959
Updated on January 05, 2020Comments
-
Curley5959 over 4 years
For my course, I have been asked to create a html page that has the functionality of allowing a user to enter the first name of a contact, which onsubmit, loads an xml file I previously created, loops through the contacts until it matches the first name entered by the user, and displays the contact information, except the email address, on the same page, in a table with headings and a
<h1>
displaying The contact details are:. If there is no match, there should be a<h2>
that says The contact does not exist.The following is my XML file:
<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="Contact.xsl" ?> <!DOCTYPE contact SYSTEM "contact.dtd"> <contact> <person> <name> <firstname>Bob</firstname> <lastname>Jones</lastname> </name> <phone>(02)44 42 45 63</phone> <address> <street>34 Highway Road</street> <city>Grovedale</city> <state>NSW</state> <postcode>3228</postcode> <email>[email protected]</email> </address> </person> <person> <name> <firstname>Gary</firstname> <lastname>Williams</lastname> </name> <phone>(02)44 41 87 56</phone> <address> <street>223 Yarra Avenue</street> <city>Branston</city> <state>NSW</state> <postcode>2317</postcode> <email>[email protected]</email> </address> </person>
I have tried a few things, but I have no idea how I would get the data to display in a table. The following is my XSL file which is how I assume they want the table to be shown, but with the results of the search.
<?xml version="1.0" encoding="ISO-8859-1"?><!-- DWXMLSource="Contact.xml" --> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; } div { margin-left: 150px; margin-right: 20px; margin-top: 50px; width: 80%; } h1 { font-size: 24px; color: #F00; } .headings { background-color: #06F; } .data { background-color: #6F9; } .table { border: 2px solid #F00; width: 100%; } </style> </head> <body> <div> <h1>CONTACTS</h1> <table class="table"> <tr class="headings"> <th>First Name</th> <th>Last Name</th> <th>Street</th> <th>City</th> <th>State</th> <th>Postcode</th> <th>Email</th> </tr> <xsl:for-each select="contact/person"> <tr class="data"> <td><xsl:value-of select="name/firstname"/></td> <td><xsl:value-of select="name/lastname"/></td> <td><xsl:value-of select="address/street"/></td> <td><xsl:value-of select="address/city"/></td> <td><xsl:value-of select="address/state"/></td> <td><xsl:value-of select="address/postcode"/></td> <td><xsl:value-of select="address/email"/></td> </tr> </xsl:for-each> </table> </div> </body> </html> </xsl:template> </xsl:stylesheet>
I have to use JavaScript to search the XML file and create a table displaying the results from the search.
The HTML I have is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Task 2</title> <script language="JavaScript" type="text/javascript"> window.onload = loadIndex; function loadIndex() { if (document.implementation && document.implementation.createDocument) { xmlDoc = document.implementation.createDocument("", "", null); xmlDoc.load("Contact.xml"); } else if (window.ActiveXObject) { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = "false"; xmlDoc.load("Contact.xml"); } } function searchIndex() { if (!xmlDoc) { loadIndex(); } var searchterm = document.getElementById("searchme").value; var allitems = xmlDoc.getElementsByTagName("firstname"); results = new Array; for (var i=0;i<allitems.length;i++) { var name = allitems[i].lastChild.nodeValue; var exp = new RegExp(searchterm,"i"); if ( name.match(exp) != null) { results.push(allitems[i]); } } showResults(results, searchterm); } function showResults(results, searchterm) { //insert table data here to be displayed } </script> </head> <body> First Name: <input type="text" name="firstname" id="searchme"> <br /> <input type="submit" value="Search" onClick="searchIndex(); return false;"> </body> </html>
As you can see, I have no idea where to start. I know I would load the XML file, then gather the first name tag, then somehow compare the two then display the results.
I have seen the following, and this is similar to what I am after, but I cant get the results to display in a table. http://www.dzone.com/snippets/simple-javascriptxml-based
Thanks for the help.