All geek questions in one place

XML search with JavaScript and displaying results in a table

For my course, I was asked to create an html page in which it is possible to allow the user to enter a contact name, which onsubmit loads the previously created xml file, contacts the contacts until it matches the first name entered by the user, and displays the contact information other than an email address on the same page, in a table with headers and the display <h1> . Contact Information:. If there is no match, there must be <h2> which says that the contact does not exist.

Below 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> bob.jones@email.com </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> gary.williams@email.com </email> </address> </person>

I tried several things, but I have no idea how I will get the data to display in the table. Below is my XSL file, which I believe wants the table to appear, but with search results.

 <?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 need to use JavaScript to search for an XML file and create a table displaying the search results.

I have HTML:

 <!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 that I would upload an XML file, and then assemble the first name tag, and then somehow compare the two, and then display the results.

I saw the following, and it looks like what I need, but I can’t get the results to display in the table. http://www.dzone.com/snippets/simple-javascriptxml-based

Thanks for the help.

+6
source share
3 answers

The following is what I used to fix the problems that I had. One of the problems that I have encountered is to check this locally. This will not work. It also awaits a message if a contact is not found. I will update when I find a solution.

UPDATE: solution found. See the 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>

Hope this helps someone else.

+1
source 
  startString = firstname.substring(0,size);

Here firstname not where define before for, so let's firstname errors below.

Uncaught TypeError: Unable to read the substring property undefined.

0
source

I named the first name as a variable like this before startString.

 firstname = xmlDoc.getElementsByTagName("firstname")[i].childNodes[0].nodeValue; startString = firstname.substring(0,size);

After that, he did a great job. Hope this helps!

0
source

Source: https://habr.com/ru/post/946915/

More articles:


All Articles