Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by maciej tyrlik
maciej tyrlik
Courses Plus Student 31 Points

Filter/search on XML data table

I am new to JavaScript and programming in general.

So I am wokring on dummy data from XML file to create a chromosome gene browser.

What I am trying to do is to have XML data uploaded in a table, which works. Now I would like to implement something which would allow me to filter/search on it "live" by any values of all columns but I can't seem to get it work. Can anyone help?

This is my dummy cd_catalog.xml:

<?xml version="1.0" encoding="UTF-8"?> <GENE> <GENEIDENTIFIERS> <ACCESSION>Empire Burlesque</ACCESSION> <GENID>Bob Dylan</GENID> <PRODUCT>USA</PRODUCT> <LOCATION>Columbia</LOCATION> <DETAILS>10.90</DETAILS> <YEAR>1985</YEAR> </GENEIDENTIFIERS> <GENEIDENTIFIERS> <ACCESSION>Hide your heart</ACCESSION> <GENID>Bonnie Tyler</GENID> <PRODUCT>UK</PRODUCT> <LOCATION>CBS Records</LOCATION> <DETAILS>9.90</DETAILS> <YEAR>1988</YEAR> </GENEIDENTIFIERS> <GENEIDENTIFIERS> <ACCESSION>Greatest Hits</ACCESSION> <GENID>Dolly Parton</GENID> <PRODUCT>USA</PRODUCT> <LOCATION>RCA</LOCATION> <DETAILS>9.90</DETAILS> <YEAR>1982</YEAR> </GENEIDENTIFIERS> </GENE>

This is my HTML:

<!DOCTYPE html> <html> <style> table,th,td { border : 1px solid black; border-collapse: collapse; } th,td { padding: 5px; } </style> <body>

<h2>Chromosome Browser</h2>

<input type="text" id="myInput" onkeyup="myFunction1()" placeholder="Search for genes..." title="Type in a accession no., gene ID, product or location">

<button type="button" onclick="loadXMLDoc()">Display genes</button> <br><br> <table id="demo"></table>

<script> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xmlhttp.open("GET", "cd_catalog.xml", true); xmlhttp.send(); } function myFunction(xml) { var i; var xmlDoc = xml.responseXML; var table="<tr><th>Accession</th><th>Gene ID</th><th>Protein Product(s)</th></th><th>Loction</th><th>Details</h></tr>"; var x = xmlDoc.getElementsByTagName("GENEIDENTIFIERS"); for (i = 0; i <x.length; i++) { table += "<tr><td>" + x[i].getElementsByTagName("ACCESSION")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("GENID")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("PRODUCT")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("LOCATION")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("DETAILS")[0].childNodes[0].nodeValue + "</td></tr>"; } document.getElementById("demo").innerHTML = table; } </script>

</body> </html>

Steven Parker
Steven Parker
243,199 Points
Steven Parker
Steven Parker
243,199 Points

Use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:   Or watch this video on code formatting.