Member Avatar for nlvp

Apologies if this is simple to some, but it's been doing my head in.

I've got my client application receiving the XML from the server but I'm having a hell of a time parsing it.

The XML is :

<?xml version="1.0" encoding="UTF-8"?>
<page>
	<id>1</id>
	<code>HOME</code>
	<template>1</template>
	<menulevel>0</menulevel>
	<menuname></menuname>
	<menutooltip></menutooltip>
	<elements>
		<element id="content1">
			<id>1</id>
			<page>1</page>
			<container>content1</container>
			<type>javascript</type>
			<value></value>

			<data><![CDATA[showmainmenu()]]></data>
		</element>
		<element id="content2">
			<id>2</id>
			<page>1</page>
			<container>content2</container>
			<type>text</type>

			<value></value>
			<data><![CDATA[<span style="font-family:helvetica,arial,sans-serif; font-size:10px; text-align:center;">Information goes here.</span>]]></data>
		</element>
		<element id="title">
			<id>3</id>
			<page>1</page>
			<container>title</container>

			<type>text</type>
			<value></value>
			<data><![CDATA[Economic Dashboard & Summary]]></data>
		</element>
	</elements>
	<generated>Wed, 12 May 2010 14:08:30 +0200</generated>
</page>

What I want to do is to be able, with Javascript, to quickly pick out various bits of data from this information, such as the <data> tag of the <element> that has attribute "title".

So far as I can tell, there's no way of getting an element by its attribute name without traversing the entire DOM tree. Is that right? Seems like a monumental pain in the ass if it's the case, so I'm hoping I'm wrong.

Since I couldn't find a way to do it, I've resorted to the following, but still have issues with my solution :

data=http.responseXML.documentElement
elements=data.getElementsByTagName('element');
var num_elements = elements.length
for (i = 0; i > num_elements ; i++) {
  if (elements[i].attributes.getNamedItem('id').value=="title") {
    alert(elements[i].getElementsByTagName('data')[0].value
  }
}

but that just returns "undefined".

I'd rather not have to traverse the DOM tree with a loop just to find the right node though - there must be a way to reference a node some other way? I can't do it by index number because they won't always be in the same order...

Any insight into either problem would be helpful, thank you in advance.

N.

  • 3 Contributors
  • 6 Replies
  • 163 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by fxm

Recommended Answers

All 6 Replies

Member Avatar for parry_kulk

I dont think there is any way to get an element by its attribute.

As for the second problem try following in Line no. 6

alert(elements[i].getElementsByTagName('data')[0].childNodes[0].nodeValue);
Member Avatar for fxm 
elements=data.getElementsByTagName('element');
for (i = 0; i < elements.length ; i++)

The comparison in the for statement was miscoded.

Edited by fxm because: n/a
Member Avatar for fxm

Take a look at .selectSingleNode() and related methods (IE only).

Edited by fxm because: n/a
Member Avatar for fxm

Take a look at .selectSingleNode() and related methods (IE only).

For the others, this

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
	var xmlstring ='<?xml version="1.0" encoding="UTF-8"?><page> <id>1</id> <code>HOME</code> <template>1</template> <menulevel>0</menulevel> <menuname></menuname> <menutooltip></menutooltip> <elements>  <element id="content1">   <id>1</id>   <page>1</page>   <container>content1</container>   <type>javascript</type>   <value></value>    <data><![CDATA[showmainmenu()]]></data>  </element>  <element id="content2">   <id>2</id>   <page>1</page>   <container>content2</container>   <type>text</type>    <value></value>   <data><![CDATA[<span style="font-family:helvetica,arial,sans-serif; font-size:10px; text-align:center;">Information goes here.</span>]]></data>  </element>  <element id="title">   <id>3</id>   <page>1</page>   <container>title</container>    <type>text</type>   <value></value>   <data><![CDATA[Economic Dashboard & Summary]]></data>  </element> </elements> <generated>Wed, 12 May 2010 14:08:30 +0200</generated></page>'

	var xmlobject = (new DOMParser()).parseFromString(xmlstring, "text/xml");

	var root = xmlobject.getElementsByTagName('page')[0];
	
	elems = root.getElementsByTagName('element');
	for (var i = 0; i < elems.length; i++) {
	    if (elems[i].getAttribute('id') == 'title') {
	        cns = elems[i].getElementsByTagName('data')
	        for (var j = 0; j < cns.length; j++) {
	            alert(cns[j].firstChild.nodeValue)
	        }
	    }
	}

    </script>
  </body>
</html>

will do what you want.

A more elegant cross-browser version should be possible.

Note: the iteration on j would not be needed if there can only be one 'data' within an <element id='title'>.

Edited by fxm because: n/a
Member Avatar for fxm 
elems = root.getElementsByTagName('element');
	for (var i = 0; i < elems.length; i++) {
	    if (elems[i].getAttribute('id') == 'title') {
	        cns = elems[i].getElementsByTagName('data')
	        for (var j = 0; j < cns.length; j++) {
	            alert(cns[j].firstChild.nodeValue)
	        }
	    }
	}

Of course taking a different view

dats = root.getElementsByTagName('data');
	for (var i = 0; i < dats.length; i++) {
	   with (dats[i].parentNode) {
	      if (tagName=='element' && getAttribute('id')=='title') alert(dats[i].firstChild.nodeValue)
	   }
	}

makes the code look simpler but could - depending on the content of the xml document - increase processing time.

Member Avatar for fxm

Of course both demos above assume [as is true in the sample xml document provided] that the 'data' nodes of interest all have at least one child and that each firstChild is of type #text; in a realistic situation it may be necessary to handle other possibilities.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.