...

View Full Version : Resolved Parsing XML With JavaScript



brando56894
09-01-2011, 12:35 AM
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 (http://maps.googleapis.com/maps/api/geocode/xml?address=NewBrunswick,NJ&sensor=false) 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
09-01-2011, 12:54 AM
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
09-01-2011, 05:45 PM
Thanks! I'll give it a try.

brando56894
09-01-2011, 06:39 PM
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
09-01-2011, 06:49 PM
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
09-01-2011, 06:57 PM
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 (http://api.jquery.com/find/) (<--- 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
09-01-2011, 07:20 PM
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
09-01-2011, 07:25 PM
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
09-01-2011, 07:50 PM
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
09-01-2011, 09:29 PM
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
09-02-2011, 08:14 AM
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
09-02-2011, 07:35 PM
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
09-02-2011, 08:41 PM
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
09-02-2011, 08:45 PM
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
09-02-2011, 09:08 PM
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.

brando56894
09-02-2011, 09:14 PM
I know absolutely nothing about AJAX calls and barely know anything about JavaScript, is it easy to implement?

this is what I currently have:


<script type="text/javascript">
//Initalizes Map and Places Pins of Job Locations
function initialize()
{
var lat;
var lng;

var url = '<?php echo $url;?>';
$.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());
console.log(lat);
console.log(long);
}
}
);

console.log(lat);
console.log(long);

var myLatlng = new google.maps.LatLng(40,-75);
var myOptions = {zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString = '<div> <div> </div> <h2><?PHP echo $company_name; ?></h2> <div> </div></div>'; //'<p><?PHP echo $job_title; ?></p>'+
var infowindow = new google.maps.InfoWindow({content: contentString});
var marker = new google.maps.Marker({position: myLatlng, map: map, title: 'Job Listings'});
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);} );
}
</script>

xelawho
09-02-2011, 10:03 PM
or just leave everything as is and use a callback function...

but from what you've posted your AJAX call looks very similar to the one you were having a problem with at the start of this thread... or am I reading it wrong?

brando56894
09-02-2011, 10:16 PM
edit:

I just placed the maps calls inside the callback function and everthing seems to work now! Thanks guys!

Just for reference sake:

<script type="text/javascript">
//Initalizes Map and Places Pins of Job Locations
function initialize()
{
var lat;
var lng;
var url = '<?php echo $url;?>';

$.ajax
({
url: 'proxy2.php?url='+url, type: "GET", dataType: "text", success: function ($data)
{
$data = $($data);
lat = ($data.find('geometry').find('location').find('lat').text());
lng = ($data.find('geometry').find('location').find('lng').text());
console.log(lat);
console.log(lng);

var myLatlng = new google.maps.LatLng(lat,lng);
var myOptions = {zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString = '<div> <div> </div> <h2><?PHP echo $company_name; ?></h2> <div> </div></div>'; //'<p><?PHP echo $job_title; ?></p>'+
var infowindow = new google.maps.InfoWindow({content: contentString});
var marker = new google.maps.Marker({position: myLatlng, map: map, title: 'Job Listings'});
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);} );
}
});
}
</script>

xelawho
09-02-2011, 10:27 PM
good to see you got it working. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum