Resolved Parsing XML With JavaScript

[brando56894]

I'm trying to parse out location data from XML that is passed back from Google. It currently parses the data correctly, the problem is that it grabs all of the matching tags, instead of just the first results set.

Here's an example of the output.

Here's the code I'm using to achieve this:

function(){ 
var url = 'http://maps.googleapis.com/maps/api/geocode/xml?address=NewBrunswick,NJ&sensor=false';
$.ajax({url: 'proxy2.php?url='+url, type: "GET", dataType: "text", success: function ($data) 
{$data = $($data); 
lat = ($data.find('geometry').find('location').find('lat').text());
long = ($data.find('geometry').find('location').find('lng').text());
}});});

How would I change it so that it only grabs the data from the first set of results?

[Old Pedant]

That's really a jQuery question, and I don't use jQuery, but I would *GUESS* you would do

lat = ($data.find('geometry').find('location')[0].find('lat').text());
long = ($data.find('geometry').find('location')[0].find('lng').text());

But can't tell without seeing the XML.

The [0]'s maybe should go after find('geometry') instead.

*************

EDIT: Silly me! I just plunked that URL into Firefox and it showed me the XML.

Should be after geometry:

lat = ($data.find('geometry')[0].find('location').find('lat').text());
long = ($data.find('geometry')[0].find('location').find('lng').text());

I would have coded that as

var firstGeometryLocation = ($data.find("geometry")[0].find("location");
var lat = firstGeometryLocation.find("lat").text();
var long = firstGeometryLocation.find("lng").text();

Just for clarity.

[brando56894]

Thanks! I'll give it a try.

[brando56894]

When I try that I get this error: $data.find("geometry")[0].find is not a function

jQuery is loaded, so what could be the problem?

      <!-- Loads jQuery -->
      <script src="http://code.jquery.com/jquery-latest.js"></script>

[Old Pedant]

Ugh. Means jQuery's XML parser isn't as sophisticated as I would have hoped!

Well, it's not as efficient, but *probably* you can do

lat = ($data.find('geometry').find('location').find('lat')[0].text());
long = ($data.find('geometry').find('location').find('lng')[0].text());

or possibly

lat = ($data.find('geometry').find('location').find('lat').text())[0];
long = ($data.find('geometry').find('location').find('lng').text())[0];

That's really a shame that the XML parser can't handle indexing at any "level". Considering all the other things various jQuery libraries are capable of.

[brando56894]

The first one gave the same error, but the second worked (sort of) but it didn't give back what I wanted. It gave me back a a 4 and a - instead of 40.4862157 and -74.4518188.

We're getting there! I found the documentation for the find() method here (<--- click this! :-P )

Edit: it seems that the one that works is doing it by character, I changed the index to 1 and it gave me a 0 and a7.

[Old Pedant]

Guess you need to get a jQuery expert in here.

The more I read that doc, the more I'm convinced that

var firstGeometryLocation = ($data.find("geometry")[0].find("location");

should have worked.

Because it says that $data.find("geometry") returns a jQuery object, and about that the docs say

A jQuery object contains a collection of Document Object Model (DOM) elements

So if find("geometry") returns a collection, why can't I get the first element of that collection using find("geometry")[0]????

If you want to investigate it for your self, try doing

     alert( $data.find("geometry") );

and see if it tells you anything.

Anyway, since nobody else has answered this, maybe you need to ask in the jQuery forum, since clearly it's really a jQuery question, not ordinary javascript.

[brando56894]

Thanks for the help! I'll post it over there and keep on messing with it to see if I can figure anything out.

The alert box just says [object Object] when it pops up.

[Old Pedant]

Are you using Firefox browser?

If so, you could turn on FireBug debugger, put a breakpoint on that alert and then inspect the value.

If you do it as

     var x = $data.find("geometry");
     alert(x);

and put the breakpoint on the alert line, then you can look at the value of x in the variables (usually in right side panel).

[brando56894]

I actually run Chrome usually but I like firebug better than the tools integrated into chrome (most likely because its what I learned to use in class).

They already solved the problem in the other section all we needed to add was .eq(0)

Example:

lat = ($data.find('geometry').eq(0).find('location').find('lat').text());

[Old Pedant]

Okay, I understand why that works.

I just don't understand why they couldn't make the [0] notation work.

Ah, well. I'm not ready to dig under the jQuery covers to find out. But good work finding the answer!

At least my instincts were right! Clearly you *did* need the first object/element in the find("geometry") collection. Or whatever it is that find gives you.

[brando56894]

Just to make it confusing for everyone! lol

Now the problem that I'm having is that the variables lat and lng aren't passed from the ajax call to the initialize() function. I tried initializing them outside of the functions but when I try and print them from inside the initialize function they come back as undefined.

<script type="text/javascript">
      <!-- Passes the geolocation API url to the local proxy server -->
	var lat;
	var lng;
	  $(document).ready
	  (function()	
		  { var url = 'http://maps.googleapis.com/maps/api/geocode/xml?address=newbrunswick,nj&sensor=false';
			$.ajax({url: 'proxy2.php?url='+url, type: "GET", dataType: "text", success: function ($data) 
			{$data = $($data); 
			lat = ($data.find('geometry').eq(0).find('location').find('lat').text());
			lng = ($data.find('geometry').eq(0).find('location').find('lng').text());
		}});}); 
				
	//Initalizes Map and Places Pins of Job Locations
	function initialize() 
	{
                console.log(lat); //outputs: undefined
	        var myLatlng = new google.maps.LatLng(lat,lng)
                [more code here]
	}
</script>

[xelawho]

quite possibly a timing race, although it's hard to tell from the snippet provided.

is there some reason you're not making your ajax call from within the initialize function?

[brando56894]

No reason, I didn't really set up the javascript, my professor did since this was my final project for one of my summer classes and the class is done and I just want to get this to work for the hell of it. That's the way he set it up and I didn't want to mess with it just in case it broke something because it took forever to get it to actually work.

I'll try moving it into the initialize() function and see if that works.

edit: The reason why I didn't put it in there is because it breaks the map for reason, it doesn't display anything if I put it at the beginning of initialize and it wouldn't be useful if I put it at the end.

[Old Pedant]

Well, a sneaky trick would be to call it from the initialize function but *NOT* use AJAX. Use SJAX. That is, make a *synchronous* call instead of async. So that the init *has* to wait for the parse to complete.