Instead of string values, JavaScript returns "[object Element]"

[aaronantrim]

Hi,

I'm doing a little bit of Google Maps API work and am new to JavaScript.

Here is the code:

// load the XML file
var request = GXmlHttp.create();
request.open("GET", "stops.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {var xmlDoc = request.responseXML;

// make objects for the three elements of the XML file
var points = xmlDoc.documentElement.getElementsByTagName("point");
var icons = xmlDoc.documentElement.getElementsByTagName("icon");
var name = xmlDoc.documentElement.getElementsByTagName("name");

// loop over all the stops in stops.xml
for (var i = 0; i < points.length; i++) {

// create lat & long point
var point = new GPoint(parseFloat(points[i].getAttribute("lng")), parseFloat(points[i].getAttribute("lat")));

// set the name of the stop
stop_name=name[i];

// create marker and place on the map
var stop_marker = createMarker(point,stop_name)
map.addOverlay(stop_marker);

// now, create HTML that shows a text list of stops with links the trigger a javascript function that opens an info window
listofstops=document.getElementById('listofstops');
listofstops.innerHTML=listofstops.innerHTML += '<a href="javascript:myclick(' + i + ')">' + stop_name + '</a><br>';

}    	
}
}

Everything is working fine, except that instead of string values for the names of bus stops taken from an XML file being displayed in an HTML list, I the text [object Element] comes back, like this:

<a href="javascript:myclick(15)">
[object Element]
</a>

I find this peculiar, because when I pass stop_name earlier (var stop_marker = createMarker(point,stop_name)), the expected text is displayed as I would expect.

If more context will be helpful to get your mind around this problem, here is an excerpt from the XML file:

<stops>
	<stop>
		<name>Metro Center</name>
		<point lng="-112.1233070252521" lat="33.57291578875893"/>
		<icon image="vm-logo.png" class="local"/>
	</stop>

Anything you can offer will be a great help. Thanks!

 

[BillyRayPreachersSon]

Try something like:

(' + i.nodeValue + ')

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Bong]

I know nothing about XML, and precious little Javascript either. But I did notice something asymmetrical in what you posted and I wonder if that might be your problem:

The "point" and "icon" information are within their respective tags. The "name" information is between the <name> and </name> tags.

Never the less, you retrieve that information the same way:

var points = xmlDoc.documentElement.getElementsByTagName("point");
var icons = xmlDoc.documentElement.getElementsByTagName("icon");
var name = xmlDoc.documentElement.getElementsByTagName("name");

Like I said, I don't know if that's wrong or not, only that it's asymmetrical.

_________________
Bob Rashkin

 

[aaronantrim]

Thanks, BillyRayPreachersSon:

I tried the change you suggested. It changed the output, but did not produce the strings with the stop names I wanted.

Here's the streamlined code with your change:

// load the XML file
var request = GXmlHttp.create();
request.open("GET", "stops.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {var xmlDoc = request.responseXML;

// make objects for the three elements of the XML file
var points = xmlDoc.documentElement.getElementsByTagName("point");
var icons = xmlDoc.documentElement.getElementsByTagName("icon");
var name = xmlDoc.documentElement.getElementsByTagName("name");

// loop over all the stops in stops.xml
for (var i = 0; i < points.length; i++) {

// create lat & long point
var point = new GPoint(parseFloat(points[i].getAttribute("lng")), parseFloat(points[i].getAttribute("lat")));

// create marker and place on the map
var stop_marker = createMarker(point,name[i])
map.addOverlay(stop_marker);

// now, create HTML that shows a text list of stops with links the trigger a javascript function that opens an info window
listofstops=document.getElementById('listofstops');
listofstops.innerHTML=listofstops.innerHTML += '<a href="javascript:myclick(' + i + ')">' + name[i].nodeValue + '</a><br>';

}        
}
}

Now, instead of [object Element], the output displayed in Firefox is null.

Also, Bong: thanks for your feedback & attention. I do not believe the asymmetry is an issue. The point and icon elements, whose data is contained in attributes are processed further in the for loop. Also, name[ i ] displays fine after it's passed to the createMarker function.

 

[BillyRayPreachersSon]

Aahh.. here's one I wrote earlier. I just couldn't find it earlier

function getXmlChildNodeValue(xmlNode, childNodeName) {
    try {
        return xmlNode.getElementsByTagName(childNodeName)[0].firstChild.nodeValue;
    } catch (e) {
        return "";
    }
}

So you could change this:

+ name[i].nodeValue +

to this:

+ name[i].firstChild.nodeValue +

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[aaronantrim]

Thank you so much. That works perfectly.
-Aaron
Trillium Transit Internet Solutions

http://www.trilliumtransit.com

p.s. Coedit looks like a cool firm.

 

[aaronantrim]

While the last fix worked fine, I can't seem to make it work for some other values coming out of the same XML file.

What I've added is another node in the XML file with info on transfers, and it's loaded in the same way as the other info was:

// load the XML file
var request = GXmlHttp.create();
request.open("GET", "stops.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {var xmlDoc = request.responseXML;

// make objects for the three elements of the XML file
var points = xmlDoc.documentElement.getElementsByTagName("point");
var icons = xmlDoc.documentElement.getElementsByTagName("icon");
var name = xmlDoc.documentElement.getElementsByTagName("name");
var route_transfer = xmlDoc.documentElement.getElementsByTagName("transfers");


// loop over all the stops in stops.xml
for (var i = 0; i < points.length; i++) {

// create lat & long point
var point = new GPoint(parseFloat(points[i].getAttribute("lng")), parseFloat(points[i].getAttribute("lat")));

// set the name of the stop
stop_name=name[i];

// create marker and place on the map
var stop_marker = createMarker(point, name[i], route_transfer[i]);

map.addOverlay(stop_marker);

// now, create HTML that shows a text list of stops with links the trigger a javascript function that opens an info window
listofstops.innerHTML=listofstops.innerHTML += '<li><a href="javascript:myclick(' + i + ')">' + name[i].firstChild.nodeValue + '</a> -<i><strong>' + route_transfer[i].firstChild.nodeValue + '</i></strong></li>';

}        
}
}

Thing is that this breaks. The Firefox error console says: Error: route_transfer.firstChild has no properties
Source File:

http://www.trilliumtransit.com/client_space/valley_metro/red_line_map4.html

Line: 89

This mystifies me seeing as how I am doing everything exactly the same as I did earlier.

Also, here is what each record in the XML file looks like now:

	<stop>
		<name>25th Ave at Dunlap</name>
		<transfers>122</transfers>
		<point lng="-112.112" lat="33.5676"/>
		<icon image="vm-logo.png" class="local"/>
	</stop>

I have also included a link to the draft script here.

I've spent a few hours trying changes and nothing's solving the problem. What am I missing?

Thanks!

 

[BillyRayPreachersSon]

That's odd - it works for me when I watch "route_transfer.firstChild.nodeValue".

Can you clear your cache, put it back in, and try again (and possibly leave it up if it still errors)?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[aaronantrim]

Don't know what the issue was, but it likely was cache related. After I cleared the cache and made some changes, it worked.

Thanks!

 

[ebryson]

aaronantrim,

I noticed you both set a variable "name", meaning the name of the transit stop, and then also use "name", as in Javascripting/XML context of anItem.name. Is that kosher?

ps. i too am interested in Javascripting/XML for Google maps (and I'm having the same problems, trying to pull info out of a KML and do fun things with them.)