Web Analytics Made Easy -
StatCounter Parsing XML With JavaScript - CodingForum

Announcement

Collapse
No announcement yet.

Parsing XML With JavaScript

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Resolved Parsing XML With JavaScript

    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:
    Code:
    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?
    Last edited by brando56894; Sep 1, 2011, 05:30 PM.

  • #2
    That's really a jQuery question, and I don't use jQuery, but I would *GUESS* you would do
    Code:
    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:
    Code:
    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
    Code:
    var firstGeometryLocation = ($data.find("geometry")[0].find("location");
    var lat = firstGeometryLocation.find("lat").text();
    var long = firstGeometryLocation.find("lng").text();
    Just for clarity.
    Be yourself. No one else is as qualified.

    Comment


    • #3
      Thanks! I'll give it a try.

      Comment


      • #4
        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?

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

        Comment


        • #5
          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
          Code:
          lat = ($data.find('geometry').find('location').find('lat')[0].text());
          long = ($data.find('geometry').find('location').find('lng')[0].text());
          or possibly
          Code:
          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.
          Be yourself. No one else is as qualified.

          Comment


          • #6
            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.
            Last edited by brando56894; Sep 1, 2011, 03:07 PM.

            Comment


            • #7
              Guess you need to get a jQuery expert in here.

              The more I read that doc, the more I'm convinced that
              Code:
              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
              Code:
                   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.
              Be yourself. No one else is as qualified.

              Comment


              • #8
                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.

                Comment


                • #9
                  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
                  Code:
                       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).
                  Be yourself. No one else is as qualified.

                  Comment


                  • #10
                    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:
                    Code:
                    lat = ($data.find('geometry').eq(0).find('location').find('lat').text());

                    Comment


                    • #11
                      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.
                      Be yourself. No one else is as qualified.

                      Comment


                      • #12
                        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.

                        Code:
                        <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>
                        Last edited by brando56894; Sep 2, 2011, 03:43 PM.

                        Comment


                        • #13
                          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?

                          Comment


                          • #14
                            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.
                            Last edited by brando56894; Sep 2, 2011, 04:58 PM.

                            Comment


                            • #15
                              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.
                              Be yourself. No one else is as qualified.

                              Comment

                              Working...
                              X