Sample XML.
<node>
<nodeid>28</nodeid>
<account_no xsi:nil="true" />
<address1>15 CANCUN CT</address1>
<serial_no>112199543</serial_no>
<x_lat>25.95513358000</x_lat>
<y_lon>-97.49027147000</y_lon>
<alarm>
<alarmid>Outage</alarmid>
<alarmtime>2012-07-30T14:46:29</alarmtime>
</alarm>
<alarm>
<alarmid>Restore</alarmid>
<alarmtime>2012-07-30T14:55:29</alarmtime>
</alarm>
</node>
<node>
<nodeid>67</nodeid>
<account_no>274192</account_no>
<address1>1618 CHIPINQUE DR</address1>
<serial_no>112199521</serial_no>
<x_lat>25.95286395000</x_lat>
<y_lon>-97.49323166000</y_lon>
<alarm>
<alarmid>Outage</alarmid>
<alarmtime>2012-07-30T14:46:29</alarmtime>
</alarm>
</node>
</ROOT>
I want to count the number of
<alarm>
elements the first node has as well as the second. I tried to do this in a for loop...
xmlDoc.getElementByTagName('alarm')[i].length;
this gives me all number of 'alarm' tags in the xml file. Which all i want is the current 'node' alarm elements. So here is what I want, I want for it to tell me the first has 2
<alarm>
tags and the second 'node' has 1
<alarm>
Just javascript no jQuery.
try this:
var nodes = xmlDoc.getElementsByTagName('node'), //Get the <node> tags
amountOfNodes = nodes.length
for(var i = 0; i < amountOfNodes; i++) { //loop thru the nodes
console.log(nodes[i].getElementsByTagName('alarm').length); //get the amount of <alarm> tags
}
EDIT
Here's a working example: Fiddle.
Tell me if that solves your problem :)
Related
What i am trying to do is get strings from my xml file, put them in an array, loop it in javascript so that each string will be displayed one by one on click of a button.
What I have so far is a JS array with the strings hardcoded:
<p id="all" > </p>
<input type="button" value="Increment" id="test"/>
<script>
var arr = ["data.string.name1", "data.string.name2", "data.string.name3"];
for(var i=0; i<=5; i++){
$("#test").on('click', function() {
$text= arr[i];
document.getElementById("all").innerHTML= $text;
});
};
</script>
I would like to remove the hard coding of the data and retrieve the strings from this xml (named data.xml)
<strings>
<string id ="name1">a. this is the first string</string>
<string id ="name2">b. He lives in Nepal </string>
<string id ="name3">c. He lived in India for 7 years</string>
<string id ="name4">d. He lives in Nepal.</string>
</strings>
$('#test').on("click", function() {
var doc=loadXMLDoc("data.xml");
var data=doc.getElementsByTagName("string");
for (i=0;i<data.length;i++) {
$text= data[i].childNodes[0].nodeValue;
document.getElementById("all").innerHTML += $text;
}
});
See W3Schools for XML DOM Access
I'm using JavaScript to access the HTML table element.
<html>
<head>
<title>Popup page</title>
</head>
<body>
<form name="F1" method="POST">
TOTAL : <p id="total"></p>
PERCENTAGE : <p id="percentage"></p>
</form>
//This table has 9 rows and 7 columns.
// I'd like to get the 6th column elements from 2nd row onwards.
<table class="collapse" >
<tbody>
<tr><td>S.No.</td><td>Subject Code</td><td>Subject Name </td><td>Int. Marks</td>
<td>Ext. Marks</td><td>Total</td><td>Credits</td><td>Result</td></tr>
<tr><td>1</td><td>GR11A1009</td><td>Environmental Science</td><td>23</td><td>66</td>
<td>89</td><td>3</td><td>P</td></tr>
<tr><td>2</td><td>GR11A1010</td><td>Mathematics - II</td><td>22</td><td>58</td>
<td>4</td><td>P</td></tr><td>80</td>
<tr><td>3</td><td>GR11A1011</td><td>Engineering Chemistry</td><td>17</td><td>53</td>
<td>70</td><td>3</td><td>P</td></tr>
<tr><td>4</td><td>GR11A1012</td><td>Engineering Graphics</td><td>20</td><td>47</td>
<td>67</td><td>3</td><td>P</td></tr>
<tr><td>5</td><td>GR11A1013</td><td>IT Workshop</td><td>25</td><td>43</td><td>68</td>
<td>2</td><td>P</td></tr>
<tr><td>6</td><td>GR11A1014</td><td>Engineering Chemistry Lab</td><td>13</td>
<td>30</td><td>43</td><td>3</td><td>P</td></tr>
<tr><td>7</td><td>GR11A1015</td><td>English Lab</td><td>20</td><td>44</td><td>64</td>
<td>3</td><td>P</td></tr>
<tr><td>8</td><td>GR11A1018</td><td>Mathematics - III</td><td>20</td><td>67</td>
<td>3</td><td>P</td></tr>
</tbody>
</table>
//JavaScript starts here
<script>
var table = document.getElementByClass("collapse");
var marks = new Array();
var total = 0,percentage;
//here is code to get all the 6th column elements fro 2nd row onwards.
for(var i=0;i<8;i++)
marks[i] = table.ChildNodes[0].ChildNodes[i+1].ChildNodes[5].nodeValue;
//here I'm adding all the values stored ( subject marks) and finding the grand total
for(var i=0;i<8;i++)
total +=marks[i];
//now, I'm calculating the percentage
percentage = total/725;
//Below code isn't having any effect. Why is it?
document.getElementById("total").innerHTML = total;
document.getElementById("percentage").innerHTML = percentage;
</script>
</body>
</html>
What is the problem with the above code ? What can I do to solve it?
Here is the output:
There are several problems with the code. In addition to the problem with getElementByClass (there is no such method, use document.getElementsByClassName("collapse")[0] instead), you are trying to access the elements in the table using ChildNodes (undefined). You probably meant to write childNodes, but you should really using children, since you don’t want to have to do with all the text nodes containing just whitespace. And you are accessing cells without checking that they exist; not all rows have 6th cell in your table.
There is also a spurious </tr> tag that confuses table parsing. Remove it.
Morever, to get the content of a td element, you cannot use nodeValue, which is defined for text nodes only. You could use innerText, but due to issues in browser support, the good old innerHTML is safer. Then you need to convert the data from string to number (otherwise adding 2 and 2 gives your 22, not 4), e.g. with the Number function. You may wish to add some error-checking here (and elsewhere).
for(var i=0;i<8;i++)
marks[i] = table.children[0].children[i+1].children[5].innerHTML;
for(var i=0;i<8;i++)
total += Number(marks[i]);
I think you mean document.getElementsByClassName()
change your document.getElementByClass to document.getElementsByClassName()
And my personal suggestion for you is to use jquery for this , which may be much more efficient and easy for this purpose
In jquery you can simplify it like this
(Dont forget to add a class to your total TD)
var total = 0;
var percentage = 0;
$(".collapse tr").each(function(e){
var tr = $(this);
var mark =$(this).find(".total").html();
var marktst=0;
if(!isNaN(Number(mark))) //NullChecking
{
marktst =Number(mark);
}
total +=marktst;
});
document.getElementById("total").innerHTML = total;
A fiddle is given below
http://jsfiddle.net/AmarnathRShenoy/j4hVc/5/
I'm using JS to search in an XML and get it's elements in order to use it in further processing, I'm using heapbox to display the elements and then using .selected to get the selected element in order to display it's children.
The problem here is that i want to get the selected element in order to make some name processing before getting children, but i got nothing when storing it in a var and got it works when using the full query directly,
for ex,
var section = '', text = '' ;
section = $('menu').find($(".selected").text()).attr('nodeName');
alert($('menu').find($(".selected").text()).attr('nodeName'));
in that code section equals nothing, text equals nothing, it alerts undefined, while using $('menu').find($(".selected").text()).attr('nodeName') directly in processing works very good.
UPDATE:
xml file:
<?xml version="1.0" encoding="UTF-8"?>
<menu parent_id="0" >
<Menu cat="main">
</Menu>
<Soup cat="main">
<Mushrom0Tomato.Soap price = "15.95" hasoption = "false">
</Mushrom0Tomato.Soap>
<Cream.Of.Chicken.Soap price = "16.95" hasoption = "true">
<Add.Mushroom price = "3.95"></Add.Mushroom>
<none price = "0"></none>
</Cream.Of.Chicken.Soap>
<Season.Soap price = "15.95" hasoption = "false">
</Season.Soap>
</Soup>
</menu>
JS code:
var cats=[], cati=0, total=0, selectedarray=[], itemoptions=[], optionstring='', section='', si=0, oi=0, items=[];
$("#total").append("Total: " + total + " EGP");
$('#dummy').load('cafe.xml',function() {
initialize();
})
function initialize(){
ct=$('menu').children().length;
for(cati==0;cati<=ct-1;cati++)
{
cats[cati]=$('menu').children().eq(cati).prop('nodeName');
var realname = cats[cati];
if(realname.indexOf(".") != -1){
realname = realname.replace(/\./g,' ');
}
$('.basic-example').append('<option value="option1">'+realname+'</option>');
}
$(".basic-example").heapbox({'onChange':function(){loadmenu()},effect:{type:"fade",speed:"slow"}});
}
// loading the items to the menu
function loadmenu()
{
$("#gallery").empty();
section = $('menu').find($(".selected").text()).attr('nodeName');
alert($("menu .selected").text().toString());
.
.
.
.find is meant for finding children elements of a selected node
You probably just want
$("menu .selected").text();
And
$("menu .selected").attr("nodeName");
The .find equivalent of this (although probably unnecessary) would be
$("menu").find(".selected").text();
And
$("menu").find(".selected").attr("nodeName");
In my HTML I have the following code. Depending on what's being shown it can
have 0,1,2,3,4 or 5 different time points. The first time period of interest is data-t0
and then next is data-t1 minus data-t0 etc.
<table id="dataTable" data-t2="1828" data-t1="1552" data-t0="1163" ></table>
<h1>Grid data</h1>
Is there a way that I can add the times to the h1 tag like this if there at least exists a
timing point data-t0?
<h1 title="Response time: t1=1163, t2=11, t3=276">Grid data</h1>
The problem I have is that I need some way for it to go through and add in the times
for each of the timing points. I can do simple jQuery but I don't know how to make it
iterate over each of the timing points.
You might just want to store your data in a single attribute using a JSON literal:
<table id="dataTable" data-t="[1163, 1552, 1828]" ></table>
var data = $("#dataTable").data('t'); //jQuery does the JSON parsing for us
var diffs = [];
for(var i = 0; i + 1 < data.length; i++) {
diffs[i] = data[i + 1] - data[i];
}
alert(diffs.join(', '));
Is there a way to get the name of an attribute of an XML node using javascript.
Lets take this as a sample XML
<?xml version="1.0" encoding="UTF-8"?>
<Employees>
<Count name="EmployeeCount">100</Count>
<employee id="9999" >Harish</employee>
<Salary>
<year id="2000">50 Grands</year>
<year id="2001">75 Grands</year>
<year id="2002">100 Grands</year>
</Salary>
</Employees>
I am loading XML using ActiveXObject.As you can see not all elements have attributes.I need to list all attributes like
name
id
id
id
id
Try this:
var nodes = xml.selectNodes("//#*")
for(var i=0; i < nodes.length; i++)
{
alert(nodes[i].nodeName);
}