Rechercher XML avec JavaScript et afficher les résultats dans le tableau

Pour mon cours, on m'a demandé de créer une page html qui a la fonctionnalité de permettre à un utilisateur d'entrer le prénom d'un contact, qui soumet, charge un fichier xml que j'ai précédemment créé, boucle les contacts jusqu'à ce qu'il correspond au premier Nom entré par l'utilisateur et affiche les informations de contact, à l'exception de l'adresse électronique, sur la même page, dans une table avec des en-têtes et une affichage <h1> Les coordonnées sont :. S'il n'y a pas de correspondance, il devrait y avoir un <h2> qui indique que le contact n'existe pas.

Voici mon fichier XML:

 <?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>

J'ai essayé quelques choses, mais je ne sais pas comment je voudrais que les données s'affichent dans une table. Voici mon fichier XSL, c'est pourquoi je suppose qu'ils veulent que la table soit affichée, mais avec les résultats de la recherche.

 <?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>

Je dois utiliser JavaScript pour rechercher le fichier XML et créer une table affichant les résultats de la recherche.

Le HTML que j'ai est le suivant:

 <!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>

Comme vous pouvez le voir, je n'ai aucune idée par où commencer. Je sais que je chargerai le fichier XML, puis rassemblerai la première étiquette de nom, puis comparez les deux puis affichez les résultats.

J'ai vu ce qui suit, et c'est semblable à ce que je suis après, mais je ne peux pas afficher les résultats dans une table. Http://www.dzone.com/snippets/simple-javascriptxml- based

Merci pour l'aide.

Voici ce que j'ai utilisé pour résoudre les problèmes que j'avais. Un problème que j'avais était de tester cela localement. Ça ne marchera pas. Ceci est également en attente d'un message si aucun contact n'est trouvé. Je vais mettre à jour quand je trouve la solution.

MISE À JOUR: solution trouvée. Voir le code mis à jour ci-dessous:

 <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>

Mon corps html:

 <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>

J'espère que cela peut aider quelqu'un d'autre.

  startString = firstname.substring(0,size);

Ici, le firstname n'est nulle où définir avant pour la boucle, c'est pourquoi donner une erreur ci-dessous.

Uncaught TypeError: Impossible de lire la propriété 'substring' de indefined.

J'ai référencé le prénom comme une variable comme celle-ci avant la startString.

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

Cela a bien fonctionné après cela. J'espère que cela pourra aider!