XML Attribute in Javascript

Question

How do I get the value of these attributes using Javascript?

<Machine Code="AL4032721" SerialNo="AL2791S" Name="Clarifier 3" SetupCode="AL34D" GroupNo="23" Type="DMRPX 517 SGV-34C" RPM1Min="1450" RPM1Max="1500" RPM2Min="0" RPM2Max="10000" DateTime="2013-08-12 06:54:52" StandBy="False" FaultyRPM="False" RPMChannel1="2" RPMChannel2="0" CritVer="">

I'm using this code from W3Schools as a test, but I don't understand how to get the value of a attribute. http://www.w3schools.com/xml/tryit.asp?filename=tryxml_app_first

EDIT: Sorry, when asking this i was a bit tierd, so a easier way to fix my problem would be this:

So I got this XML file:

<CATALOG>
<CD>
    <TITLE Name="123">Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
</CD>
<CD>
    <TITLE>Hide your heart</TITLE>
    <ARTIST>Bonnie Tyler</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS Records</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1988</YEAR>
</CD>
<CD>
    <TITLE>Greatest Hits</TITLE>
    <ARTIST>Dolly Parton</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>RCA</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1982</YEAR>
</CD>
<CD>
    <TITLE>Still got the blues</TITLE>
    <ARTIST>Gary Moore</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Virgin records</COMPANY>
    <PRICE>10.20</PRICE>
    <YEAR>1990</YEAR>
</CD>
<CD>
    <TITLE>Eros</TITLE>
    <ARTIST>Eros Ramazzotti</ARTIST>
    <COUNTRY>EU</COUNTRY>
    <COMPANY>BMG</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1997</YEAR>
</CD>
<CD>
    <TITLE>One night only</TITLE>
    <ARTIST>Bee Gees</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Polydor</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1998</YEAR>
</CD>
<CD>
    <TITLE>Sylvias Mother</TITLE>
    <ARTIST>Dr.Hook</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS</COMPANY>
    <PRICE>8.10</PRICE>
    <YEAR>1973</YEAR>
</CD>
<CD>
    <TITLE>Maggie May</TITLE>
    <ARTIST>Rod Stewart</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Pickwick</COMPANY>
    <PRICE>8.50</PRICE>
    <YEAR>1990</YEAR>
</CD>
<CD>
    <TITLE>Romanza</TITLE>
    <ARTIST>Andrea Bocelli</ARTIST>
    <COUNTRY>EU</COUNTRY>
    <COMPANY>Polydor</COMPANY>
    <PRICE>10.80</PRICE>
    <YEAR>1996</YEAR>
</CD>
<CD>
    <TITLE>When a man loves a woman</TITLE>
    <ARTIST>Percy Sledge</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Atlantic</COMPANY>
    <PRICE>8.70</PRICE>
    <YEAR>1987</YEAR>
</CD>
<CD>
    <TITLE>Black angel</TITLE>
    <ARTIST>Savage Rose</ARTIST>
    <COUNTRY>EU</COUNTRY>
    <COMPANY>Mega</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1995</YEAR>
</CD>
<CD>
    <TITLE>1999 Grammy Nominees</TITLE>
    <ARTIST>Many</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Grammy</COMPANY>
    <PRICE>10.20</PRICE>
    <YEAR>1999</YEAR>
</CD>
<CD>
    <TITLE>For the good times</TITLE>
    <ARTIST>Kenny Rogers</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Mucik Master</COMPANY>
    <PRICE>8.70</PRICE>
    <YEAR>1995</YEAR>
</CD>
<CD>
    <TITLE>Big Willie style</TITLE>
    <ARTIST>Will Smith</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1997</YEAR>
</CD>
<CD>
    <TITLE>Tupelo Honey</TITLE>
    <ARTIST>Van Morrison</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Polydor</COMPANY>
    <PRICE>8.20</PRICE>
    <YEAR>1971</YEAR>
</CD>
<CD>
    <TITLE>Soulsville</TITLE>
    <ARTIST>Jorn Hoel</ARTIST>
    <COUNTRY>Norway</COUNTRY>
    <COMPANY>WEA</COMPANY>
    <PRICE>7.90</PRICE>
    <YEAR>1996</YEAR>
</CD>
<CD>
    <TITLE>The very best of</TITLE>
    <ARTIST>Cat Stevens</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Island</COMPANY>
    <PRICE>8.90</PRICE>
    <YEAR>1990</YEAR>
</CD>
<CD>
    <TITLE>Stop</TITLE>
    <ARTIST>Sam Brown</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>A and M</COMPANY>
    <PRICE>8.90</PRICE>
    <YEAR>1988</YEAR>
</CD>
<CD>
    <TITLE>Bridge of Spies</TITLE>
    <ARTIST>T'Pau</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Siren</COMPANY>
    <PRICE>7.90</PRICE>
    <YEAR>1987</YEAR>
</CD>
<CD>
    <TITLE>Private Dancer</TITLE>
    <ARTIST>Tina Turner</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Capitol</COMPANY>
    <PRICE>8.90</PRICE>
    <YEAR>1983</YEAR>
</CD>
<CD>
    <TITLE>Midt om natten</TITLE>
    <ARTIST>Kim Larsen</ARTIST>
    <COUNTRY>EU</COUNTRY>
    <COMPANY>Medley</COMPANY>
    <PRICE>7.80</PRICE>
    <YEAR>1983</YEAR>
</CD>
<CD>
    <TITLE>Pavarotti Gala Concert</TITLE>
    <ARTIST>Luciano Pavarotti</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>DECCA</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1991</YEAR>
</CD>
<CD>
    <TITLE>The dock of the bay</TITLE>
    <ARTIST>Otis Redding</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Atlantic</COMPANY>
    <PRICE>7.90</PRICE>
    <YEAR>1987</YEAR>
</CD>
<CD>
    <TITLE>Picture book</TITLE>
    <ARTIST>Simply Red</ARTIST>
    <COUNTRY>EU</COUNTRY>
    <COMPANY>Elektra</COMPANY>
    <PRICE>7.20</PRICE>
    <YEAR>1985</YEAR>
</CD>
<CD>
    <TITLE>Red</TITLE>
    <ARTIST>The Communards</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>London</COMPANY>
    <PRICE>7.80</PRICE>
    <YEAR>1987</YEAR>
</CD>
<CD>
    <TITLE>Unchain my heart</TITLE>
    <ARTIST>Joe Cocker</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>EMI</COMPANY>
    <PRICE>8.20</PRICE>
    <YEAR>1987</YEAR>
</CD>

And this is my HTML/JavaScript File:

<!DOCTYPEHTLM>
<html>
  <head>
<!-- General -->
<title>XML</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>

    <!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet"></link>
<link href="css/bootstrap-theme.css" rel="stylesheet"></link>
<script src="https://code.jquery.com/jquery.js"></script>
<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","AL4032721.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

x=xmlDoc.getElementsByTagName("CD");
i=0;

function displayCD()
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt1=artist;
txt2=title;
txt3=year;
document.getElementById("1").innerHTML=txt1;
document.getElementById("2").innerHTML=txt2;
document.getElementById("3").innerHTML=txt3;
}
</script>
  </head>
  <body onload="displayCD()">
<h2>Machines</h2>

<div class="list-group col-lg-2">
  <a href="#" class="list-group-item"><span class="badge">14</span><span id="1"></span></a>
  <a href="#" class="list-group-item"><span class="badge">14</span><span id="2"></span></a>
  <a href="#" class="list-group-item"><span class="badge">14</span><span id="3"></span></a>
  <a href="#" class="list-group-item"><span class="badge">14</span><span id="to"></span>1</a>
  <a href="#" class="list-group-item"><span class="badge">14</span><span id="to">            </span>1</a>
</div>
  </body>
</html>

So what I wanna do is to take the value of the variable "Name" of the Title tag in the XML document and display it on the HTML site. Right now the code works fine for displaying the value of all the tags, but I can't figure out how to make it display the variables.

Relevant part of the DOM spec: http://dom.spec.whatwg.org/#interface-element — Felix Kling, Dec 27 '13 at 01:02
w3schools is a bad site, see [w3fools](http://w3fools.com). [MDN](https://developer.mozilla.org/en-US/docs/) is much better. — Oriol, Dec 27 '13 at 15:39

score 0 · Answer 1 · answered Dec 27 '13 at 00:57

0

machine = docmuent.getElementsByTagName('machine')[0].attributes

might give you a hash?

answered Dec 27 '13 at 00:57

Dan Baker

1,757
3
21
36

score 0 · Accepted Answer · edited May 23 '17 at 12:32

The first thing you need to do is to parse the string to a xml document.

Cross browser problems

Unfortunately, the default parser that comes with the browser is not standardized and can vary from browser to browser.

Personally, I like to use jQuery to solve my cross browser troubles, and in this case I would use the $.parseXML method

jQuery method using $.parseXML

Here is an example:

var xml    = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>";
var xmlDoc = $.parseXML( xml );
var xml    = $( xmlDoc );
var title  = xml.find( "title" );

In your case

var xml    = '<Machine Code="AL4032721" SerialNo="AL2791S" Name="Clarifier 3"
             SetupCode="AL34D" GroupNo="23" Type="DMRPX 517 
             SGV-34C" RPM1Min="1450" PM1Max="1500" RPM2Min="0" 
             RPM2Max="10000" DateTime="2013-08-12 06:54:52"
             StandBy="False" FaultyRPM="False" RPMChannel1="2" 
             RPMChannel2="0" CritVer=""/>';

var xmlDoc  = $.parseXML( xml );
var machine = $(xmlDoc).find('Machine');

var groupNo = machine.attr('GroupNo');

console.log( groupNo ); // should write '23' in the console

Solutions that don't use jQuery

In case you don't want to use jQuery, you can look at this question where in the answers you have several implementations of cross browser solution for the parseXml method without using jQuery.

XML parsing of a variable string in JavaScript

Some additional comments

Also please note the last backslash '/' I have appended to the xml string you provided. I did that to make the xml string valid. Another way to make it valid would be to append a closing tag it

<Machine></Machine>

XML Attribute in Javascript

2 Answers2

Cross browser problems

jQuery method using $.parseXML

Solutions that don't use jQuery

Some additional comments