Parsing XML Files doesn't work
Question
I'm developing an app, where on the click of a button, the program calls information stored in an XML file to show in a <span> tag using JavaScript;
function viewXMLFiles() {
console.log("viewXMLFiles() is running");
var xmlhttp = new HttpRequest();
xmlhttp.open("GET", "TestInfo.xml", false);
xmlhttp.send;
console.log("still running");
var xmlDoc = xmlhttp.responseXML;
console.log("getting tired");
document.getElementById("documentList").innerHTML = xmlDoc.getElementByTagName("documentList")[0].childNodes[0].nodeValue;
document.getElementById("documentList").innerHTML = xmlDoc.getElementByTagName("documentList")[1].childNodes[1].nodeValue;
console.log("done");
}
and then the HTML to call it is (and where the XML file would be shown);
<button onclick = "viewXMLFiles();">View Document Info</button><br>
<span id = "documentList">
<!--This is where the XML will be loaded into-->
</span>
the XML file is;
<document_list>
<document>
<document_name>Holidays.pdf</document_name>
<file_type>.pdf</file_type>
<file_location></file_location>
</document>
<document>
<document_name>iPhone.jsNotes.docx</document_name>
<file_type>.docx</file_type>
<file_location></file_location>
</document>
</document_list>
In the console, the first message comes up, but nothing happens and thats all that appears. But i'm really (like, really new) to XML and parsing and don't understand what's wrong. Can you please help?
4 answers
solution1
2 2013-03-20 12:03:09
Use this because You have only one childnode for documentlist
document.getElementById("documentList").innerHTML = xmlDoc.getElementByTagName("documentList")[0].childNodes[0].nodeValue;
document.getElementById("documentList").innerHTML = xmlDoc.getElementByTagName("documentList")[1].childNodes[0].nodeValue;
solution2
2 2013-03-20 12:20:18
Note:
- Use getElementsByTagName
- There is no documentList tag in your xml
Tag document is the only array in your xml not document_list
function viewXMLFiles() { console.log("viewXMLFiles() is running"); xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET","TestInfo.xml",false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; console.log("still running"); var getData = xmlDoc.getElementsByTagName("document"); console.log("getting tired"); document.getElementById("documentList").innerHTML = getData[0].getElementsByTagName("document_name")[0].childNodes[0].nodeValue; document.getElementById("documentList1").innerHTML = getData[1].getElementsByTagName("document_name")[0].childNodes[0].nodeValue; console.log("done"); }
Add one more span with id documentList1 to execute the above code
solution3
1 2013-03-20 11:59:35
I think the problem is in:
var xmlhttp = new HttpRequest();
It should be:
var xmlhttp = new XMLHttpRequest();
solution4
0 ACCPTED 2013-03-20 13:12:19
If you want to display the information for each Document, you would want something like this:
<html>
<head>
<script type="text/javascript">
function getMyXML() {
console.log("viewXMLFiles() is running");
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","TestInfo.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
console.log("still running");
console.log("getting tired");
document.getElementById("docname").innerHTML = xmlDoc.getElementsByTagName("document_name")[0].childNodes[0].nodeValue;
document.getElementById("filetype").innerHTML = xmlDoc.getElementsByTagName("file_type")[0].childNodes[0].nodeValue;
document.getElementById("docname2").innerHTML = xmlDoc.getElementsByTagName("document_name")[1].childNodes[0].nodeValue;
document.getElementById("filetype2").innerHTML = xmlDoc.getElementsByTagName("file_type")[1].childNodes[0].nodeValue;
console.log("done");
}
</script>
</head>
<body>
<input type="button" onclick="getMyXML();" value="Get XML" />
<div id="doclist">
<h2>Document 1</h2>
<label>Docname: </label><span id="docname"></span><br/>
<label>Filetype: </label><span id="filetype"></span><br/>
</div>
<div id="doclist">
<h2>Document 2</h2>
<label>Docname: </label><span id="docname2"></span><br/>
<label>Filetype: </label><span id="filetype2"></span><br/>
</div>
</body>
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.