Extracting text from an XML file based on an element's value? - javascript

I have a simple XML file that looks like this:
<?xml version="1.0" ?>
<devices>
<device>
<name>Inside</name>
<value>67.662498</value>
</device>
<device>
<name>Outside</name>
<value>69.124992</value>
</device>
</devices>
I want to extract the temperature (value) for "Outside" using JavaScript. Here is what I have so far:
<script type="text/javascript">
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","data.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.getElementById("name").innerHTML=
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("value").innerHTML=
xmlDoc.getElementsByTagName("value")[0].childNodes[0].nodeValue;
</script>
When I run this inside an HTML file, it pulls the name "Inside" and its temperature value and not the Outside temperature value. I just want to be able to run this and have "69.124992" show up as the value. What do I need to add to parse this file so it looks only for the device with the name "Outside"?

Your current implementation is just getting the first occurrence of name and value and displaying the value, Instead why not just loop
var names = xml.getElementsByTagName('name');
for (var iDx = 0; iDx < names.length; iDx++) {
if (names[iDx].childNodes[0].nodeValue == 'Outside') {
jQuery('#name').text(names[iDx].childNodes[0].nodeValue);
jQuery('#value').text(xml.getElementsByTagName('value')[iDx].childNodes[0].nodeValue);
break;
}
}
JSFiddle

Related

Changing HTML group class with JavaScript variable

I'm using an AJAX function to grab some data from a database and run a simple if statement. I want to use the output variable "test" to change the class (and therefore styling) of an SVG group. I was originally using PHP on page load but now that I'm using AJAX I have to use JavaScript and it isn't working.
Here's the AJAX:
function loadfacebook1()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var obj = JSON.parse(xmlhttp.responseText);
document.getElementById("fbname").innerHTML=obj.name;
document.getElementById("fbtraffic").innerHTML=obj.traffic;
document.getElementById("fbrevenue").innerHTML=obj.revenue;
document.getElementById("fbprofit").innerHTML=obj.profit;
document.getElementById("fbrafrica").innerHTML=obj.rafrica;
var test = document.getElementById('fbrafrica').value;
if(test > 100)
{var africastyle = "b1";
}
}
}
xmlhttp.open("GET","getfacebook.php",true);
xmlhttp.send();
}
And here is the group that I'm trying to change the class of:
<g class="<?php echo $africastyle ;?>" transform="translate(0,239) scale(0.016963,-0.016963)">
As you can see it uses PHP at the moment but how to I replace this with the JavaScript variable "test" that I assigned in the AJAX function?
Thanks,
Will
Here's what I would do. Add an ID to your group element.
HTML:
<g id="myGroup">
JS:
if(test > 100){
var el = document.getElementById('myGroup');
el.setAttribute('class', 'b1');
}

Javascript "getElementsByClassName" not working

I have a website with a picture of a tree, I have then used Ajax to remove that tree and insert a number using javascript. What I used for that was;
document.getElementById("cut_oak_tree");
I have now added another tree on the page, which should have the exact same function as the first tree, except that only the tree that you clicked on, shall be removed. To avoid duplicating code, I have tried adding following:
document.getElementsByClassName("cut_oak_tree");
and then changed my div from using id to class. However, nothing happens when I click any of the trees now. My current ajax code right now, looks like this:
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var getClass = document.getElementsByClassName("cut_oak_tree").innerHTML=xmlhttp.responseText;//ask for this.
for(i=0;i<getClass.length;i++)
{
getClass[i].innerHTML = "";
}
}
}
xmlhttp.open("POST","xxx",true);
xmlhttp.send();
}
I have been searching a lot and found that I might need to use a for loop together with the document.getElementsByClassName("cut_oak_tree");
but I can't really get that to work. If I have figured my problem correctly, everything should be good if I could just determine which of the tree images in the div should be removed when it's pressed. Thanks in advance.
EDIT:
Html sample:
<div id "thanks">
<img class="cut_oak_tree" src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(), myFunction()">
<img class="cut_oak_tree" src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(), myFunction()">
</div>
Try the following:
document.getElementsByClassName("cut_oak_tree")[0];
If you want to apply changes to more than one elements with classname cut_oak_tree then you will have to use for loop
var getClass = document.getElementsByClassName("cut_oak_tree");
for(i=0;i<getClass.length;i++)
{
getClass[i].innerHTML = "";
}
Using your earlier HTML with slight modifications you can do the following:
HTML
<div class="cut_oak_tree">
<img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this.outerHTML), myFunction()" />
<img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this.outerHTML), myFunction()" />
</div>
Hence change your JS function to :
function loadXMLDoc(h)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var getEle = document.getElementsByClassName('cut_oak_tree')[0];
getEle.innerHTML = getEle.innerHTML.replace(h,xmlhttp.responseText);
}
}
xmlhttp.open("POST","http://www.pbpixels.com/x/post.php",true);
xmlhttp.send();
}
Demo Fiddle
Response to comment:
Inorder to uniquely identify clicked <img>s with same images just make minor change to the one of the img srcs from the two.Example give space within src src="http://www.pbpixels.com/x/images/oak.png ".Note the space after .png which will make the difference between the two
I would think that the most straightforward way to do it would be to pass the clicked element into the loadXMLDoc() as a parameter, and then get the parent of that element. Something like this:
HTML
<div id="cut_oak_tree">
<img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this), myFunction()">
<img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this), myFunction()">
</div>
JS
function loadXMLDoc(clickedElement) {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
clickedElement.parentNode.innerHTML = xmlhttpinnerHTML = xmlhttp.responseText; //ask for this.
}
}
xmlhttp.open("POST","xxx",true); //the xxx's represent my website
xmlhttp.send();
}
NOTE: I'm not 100% sure that I have the logic right, since you changed your original post, while I was typing up my answer. :)
UPDATE #2: I found the original code in the edit history . . . my code should be correct now.

Unable to get property of GetElementsbyTagName of undefined or null reference

Let me start by stating I am a Newb and while I have created a fair bit of html code, I am trying to move into XML and Javascipt for my own edification. That being said, I have run into a problem (which I researched and found similar issues) that has stumped me. The funny thing the code worked a few times under Firefox but now it works on nothing and I can't seem to find the issue. I did use the IE Console to check file open status etc.. but no joy. As the subject line indicates I can't seem to list the XML tag(s) in a table I am building for a web page. Here is the relevant html code and associated XML file. Any assistance would be appreciated.
HTML Code
<script>
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","event.xml",true);
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState!=4)return;
if(xmlhttp.status==200)
alert(xmlhttp.responseText);
else
alert("Request failed!");
};
//onreadystatechange
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1'>");
var y=xmlDoc.getElementsByTagName("months");
for (i=0;i<y.length;i++)
{
document.write("<tr bgcolor='#6CA6CD'>");
document.write("<th>");
document.write(month[i].getElementsByTagName("month1")[0].childNodes[0].nodeValue);
document.write("</th>");
document.write("<th>");
document.write(month[i].getElementsByTagName("month2")[0].childNodes[0].nodeValue);
document.write("</th>");
document.write("</tr>");
}
var x=xmlDoc.getElementsByTagName("month_event");
for (i=0;i<x.length;i++)
{
document.write("<tr><td bgcolor='white'>");
document.write("<b> ");
document.write(x[i].getElementsByTagName("month1_date")[0].childNodes[0].nodeValue);
document.write("</b> - ");
document.write(x[i].getElementsByTagName("month1_day")[0].childNodes[0].nodeValue);
document.write(" - ");
document.write(x[i].getElementsByTagName("month1_time")[0].childNodes[0].nodeValue);
document.write(" - ");
document.write(x[i].getElementsByTagName("month1_evdescription")[0].childNodes[0].nodeValue);
document.write("</td><td bgcolor='lightgrey'>");
document.write("<b> ");
document.write(x[i].getElementsByTagName("month2_date")[0].childNodes[0].nodeValue);
document.write("</b> - ");
document.write(x[i].getElementsByTagName("month2_day")[0].childNodes[0].nodeValue);
document.write(" - ");
document.write(x[i].getElementsByTagName("month2_time")[0].childNodes[0].nodeValue);
document.write(" - ");
document.write(x[i].getElementsByTagName("month2_evdescription")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>
XML File:
<?xml version="1.0" encoding="UTF-8"?>
<events>
<months>
<month1>December</month1>
<month2>January</month2>
</months>
<month_event>
<month1_date>22 Dec</month1_date>
<month1_day>Sunday</month1_day>
<month1_time>10:30AM - 11:00AM</month1_time>
<month1_evdescription>The Centre is closed</month1_evdescription>
<month2_date>6 Jan</month2_date>
<month2_day>Tuesday</month2_day>
<month2_time>All Day</month2_time>
<month2_evdescription>The Heavy</month2_evdescription>
</month_event>
<month_event>
<month1_date>25 Dec</month1_date>
<month1_day>Wednesday</month1_day>
<month1_time>All Day</month1_time>
<month1_evdescription>Christmas</month1_evdescription>
<month2_date>10 Jan</month2_date>
<month2_day>Tuesday</month2_day>
<month2_time>10:30AM - 11:30AM</month2_time>
<month2_evdescription>Nothing</month2_evdescription>
</month_event>
</events>
getElementsByTagName returns a NodeList, not an array, so use x.item(i).
To get it to work, make the following changes:
1) change true to false for synchronous (line 11)
xmlhttp.open("GET","event.xml",false);
2) declare the month variable (line 31+)
for (i=0;i<y.length;i++)
{
var month = y.item(i); // insert this line
document.write("<tr bgcolor='#6CA6CD'>");
document.write("<th>");
document.write(month.getElementsByTagName("month1").item(0).childNodes[0].nodeValue); // !!!
3) use .item(i) and .item(0) rather than [i] and [0] (line 45+)
var x=xmlDoc.getElementsByTagName("month_event");
for (i=0;i<x.length;i++)
{
document.write("<tr><td bgcolor='white'>");
document.write("<b>test ");
document.write(x.item(i).getElementsByTagName("month1_date").item(0).childNodes[0].nodeValue);

How to add a file extension to a user input field with javascript

Im trying to retrieve a txt doc from server with ajax request. The name of the txt doc depends on a text input on html doc. Basically I want to append .txt to the end of the input field following an onclick event
// JavaScript Document
function getData(){
var xmlhttp;
var user=document.getElementById("nameDetails").value;
var userText = user + ".txt"; //**not the solution
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("userSubmit").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","userText",true);
xmlhttp.send();
}
If you want to append .txt to the input field itself, you could try this:
document.getElementById("nameDetails").value = document.getElementById("nameDetails").value + ".txt";
or the short form:
document.getElementById("nameDetails").value += ".txt";

Display multiple XML nodes into HTML

I'm trying to display all the nodes of an specific tag, so far it does filter the data I want but only one node showsup. Can somebody help me please?
Here's the XML:
<?xml version="1.0" encoding="UTF-8"?>
<USA>
<NY>
<Cell>NY Store 1</Cell>
<Cell>NY Store 2</Cell>
<Cell>NY Store 3</Cell>
</NY>
<CA>
<Cell>CA Store 1</Cell>
<Cell>CA Store 2</Cell>
<Cell>CA Store 3</Cell>
</CA>
</USA>
Here's the Script:
<script>
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("CA");
for (i=0;i<x.length;i++)
{
xx=x[i].getElementsByTagName("Cell");
}
try
{
txt=txt + xx[0].childNodes[0].nodeValue + "<br />";
}
catch (er)
{
}
document.getElementById("result").innerHTML=txt;
}
}
xmlhttp.open("GET","stores.xml",true);
xmlhttp.send();
}
</script>
and here's the HTML:
<button type="button" onclick="loadXMLDoc()">California</button>
<div id="result">Please select your state</div>
As I said, it words fine, but its only showing one element under California. Any ideas?
xx is also an array, so you need another loop inside x loop.
try catch need to be inside this loop.
I am not very good at javascript, but if your syntax is correct. So, I think this may work (I didn't test it though):
for (i=0;i<x.length;i++)
{
xx=x[i].getElementsByTagName("Cell");
for(j=0;j<xx.length;j++) {
try {
txt=txt + xx[j].childNodes[0].nodeValue + "<br />";
}
catch(er) {
}
}
}
document.getElementById("result").innerHTML=txt;

Categories