getElementsByTag not working - javascript

Hi so I have a XML document in a folder on my desktop, I am trying to read out all the elements with the tag name "cuisine".
Here is my code:
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","data.xml", false);
xmlhttp.send()
xmlData = xmlhttp.responseXML;
cuisineList = xmlData.getElementsByTagName("cuisine");
document.getElementById("test").innerHTML = cuisineList.length;
When I print out the length of the cuisineList it says its zero.
Here is my XML document:
<?xml version="1.0" encoding"ISO-8859-1"?>
<food>
<cuisine type="Chinese">
</cuisine>
<cuisine type="Indian">
</cuisine>
</food>

I think you have an error in your document (there is a missing '=' in the encoding attribute).

Related

While I link an xml file to my html file to show a paragraph on my website it is showing undefined .I'm giving the javascript code i have written

Here I'm providing the javascript code which I have written for this pourpose.
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "Q4.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
document.getElementById("m").innerHTML= xmlDoc.getElementsByTagName("p")[0].childNodes[0].nodevalue;
</script>```

Import XML with JavaScript function

I have a panel, that when clicked opens up and displays data. I would like to have the data come from a XML file.
The JavaScript function that I was using to display html text worked, so I was trying to use that function, but modify it to bring over the XML from another file.
The JavaScript function from the JS file:
function nameFunction () {document.querySelector("#collapse1> .panel-body").innerHTML = "Name works"};
The XML from the XML file
<dashboard>
<name>name goes here</name>
</dashboard>
The html file that calls the JS function:
<a data-toggle="collapse" href="#collapse1" onClick="nameFunction()" >Name</a>
Can the .innerHTML method be used for this task? If so, can someone provide an example?
function nameFunction () {
var xmlText = "<dashboard>"+
"<name>name goes here</name>"+
"</dashboard>";
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlText,"text/xml");
document.querySelector("#collapse1 > .panel-body").innerHTML = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
}
hope this can help you ! (this works)
function nameFunction (){
var xhttp;
if (window.XMLHttpRequest) { // Create an instance of XMLHttpRequest object.
//code for IE7+, Firefox, Chrome, Opera, Safari
xhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", "data.xml", false);
xhttp.send();
var xmlDoc = xhttp.responseXML;
document.querySelector("#collapse1 > .panel-body").innerHTML = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
}
this works in firefox,(not in chrome - chrome doesn't have XMLHttpRequest API I guess)
so now you can parse xml file
you can import files using script tag.
<script id="xml" type="notjs" src="XX.xml"></script>
var xml = document.getElementById("xml");
Is this what you want?

javascript json parse from URL

UPDATED:
I'm trying to parse a response from a URL but have no idea if I'm doing it correctly.
The URL returns the following JSON:
{"make":"truck","date":"23 July 2009","colour":"pink"};
If i replace var newtext = xhttp.responseText; with
var newtext = '{"make":"truck","date":"23 July 2009","colour":"pink"}';
it works but as soon as i go back to the xhttp.responseText it just shows a blank page.
The code I'm using is:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
xhttp.open("GET", "https://url.com", false);
xhttp.send();
var newtext = xhttp.responseText;
var obj = JSON.parse(newtext);
document.getElementById("demo").innerHTML =
obj.make + "<br>" +
obj.colour + "<br>" +
obj.date;
</script>
</body>
</html>
You haven't defined your variable xhttp, but you are trying to call functions on it. This is resulting in the Uncaught ReferenceError error and causing the rest of the code not to run. To create an XMLHttpRequest object as you appear to be trying to do, put this at the top of your script.
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// the object actually exists here now so the functions can be called on it
xhttp.open("GET", "https://url.com", false);
xhttp.send();
...
Then you can continue on with the rest of your code, assured that your xhttp object has been initialized.
I don't normally recommend using w3schools, but the above code was copied from http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp

Can't create an XML node using Javascript

I am trying to create a simple XML node with text "New node!"
var xmlDoc = loadXMLDoc("myFile.xml");
var newElem = xmlDoc.createElement("elem");
newElem.innerHTML = "New node!";
Where loadXMLDoc() is
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;
}
But the code does not work. I expect the XML file to have a new node "<elem>" with "New node!" in it, but it was still the same. I have no idea why. There were no error messages.
How do I get my code to work?
Your code is creating a new element, but you are not appending it to the XML.
See the example here: https://developer.mozilla.org/en-US/docs/Web/API/document.createElement#Example

how to read xml file with many nodes with javascript

i have an RegistrationResponseMessages.xml:
<messages>
<error>
<code id="501">Couldn't retrieve the HTML document because of server-configuration problems.</code>
<code id="502">Server busy, site may have moved ,or you lost your dial-up Internet connection.</code>
</error>
<success></success>
</messages>
trying to read contents of code id 501 and 502 with javascript, but it not works.
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "RegistrationResponseMessages.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
document.getElementById("errorCode403").innerHTML = getElementsByTagName(501)[0].childNodes[0].nodeValue);
displaying it here:
<label id="errorCode403" style="font-weight: 600; color: red;">give some error</label>
what is my problem?
It's ajax, you have to wait for the data to be returned, then you have to access it the right way:
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onload = function() {
var xmlDoc = this.responseXML,
value = xmlDoc.getElementsByTagName('501')[0].childNodes[0].nodeValue;
document.getElementById("errorCode403").innerHTML = value;
}
xmlhttp.open("GET", "RegistrationResponseMessages.xml", false);
xmlhttp.send();
Not sure about the traversal in the XML, as 501 sounds like a strange tagName ?
EDIT:
to get a list of the ID's you do this inside the onload handler:
xmlhttp.onload = function() {
var xmlDoc = this.responseXML,
var codes = xmlDoc.getElementsByTagName('code');
var array = [];
for (var i=0; i<codes.length; i++) {
array.push( codes[i].id );
}
console.log(array);
}

Categories

Resources