How to filter/search on xml data loaded in html table?
Question
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>
1 answers
solution1
0 2018-03-27 11:10:26
I think you might need to parse the XML with a DOM parser, you can find a well done explanation here:
Using JavaScript to parse an XML file
And if you want to know in more detail how DOM parsing works:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.