How to iterate over an xml element's direct children in javascript, saving values of specific attributes?

Question

I am relatively new to javascipt and have discovered ajax, which I have been able to use to retrieve an xml file from a URL and find an element with a specific attribute value, but I'm unable to figure out how to iterate over the element's children, fetching specific attribute values. The xml file I am working with can be found here, or for a snippet of the xml file, see below:

<markers>
  <country lat="53.6707" lng="-4.39453" zoom="5" name="nextbike UK" hotline="+442081669851" domain="uk" country="GB" country_name="United Kingdom" terms="http://www.nextbike.co.uk/media/TERMS-UK_3.pdf" website="http://www.nextbike.co.uk/">
    <city uid="237" lat="55.8589" lng="-4.25549" zoom="12" maps_icon="" alias="glasgow" break="0" name="Glasgow">
      ...
      <place uid="264281" lat="55.86078768935794" lng="-4.258602261543274" name="Central Station " spot="1" number="8401" bikes="5+" bike_racks="10" terminal_type="unknown" bike_numbers="81610,81508,81805,81756,81835" />
      <place uid="264283" lat="55.860767" lng="-4.264083" name="Waterloo Street" spot="1" number="8402" bikes="5+" bike_racks="6" terminal_type="unknown" bike_numbers="81771,81571,81647,81588,81934" />
      ...
    </city>
  </country>
</markers>

I am able to fetch the specific city with 'name="glasgow"', and all it's children

<city uid="237" lat="55.8589" lng="-4.25549" zoom="12" maps_icon="" alias="glasgow" break="0" name="Glasgow">
  <place uid="264281" lat="55.86078768935794" lng="-4.258602261543274" name="Central Station " spot="1" number="8401" bikes="5+" bike_racks="10" terminal_type="unknown" bike_numbers="81610,81508,81805,81756,81835" />
  <place uid="264283" lat="55.860767" lng="-4.264083" name="Waterloo Street" spot="1" number="8402" bikes="5+" bike_racks="6" terminal_type="unknown" bike_numbers="81771,81571,81647,81588,81934" />
  ...
</city>

quite easily, using $(xml).find("[name='Glasgow']");, but I am lost as to how to process the returned object. I need to iterate over every child (<place/>) and select specific attributes, e.g. lat="...", lng="..."

Depending on how easy it is to get this information on the fly may affect whether I need to store the information in some other object. I will be taking the user's geolocation and finding the closest set of latitude and longitude points available. The above question in bold is the most important, but if anyone wants to advise on what structure they think would be best to store this information, and the best way to retrieve the information quickly, you're more than welcome to do so.

score 1 · Answer 1 · edited May 23 '17 at 11:52

Use children().each()

$(xml).find("[name='Glasgow']").children.each(function() {
    console.log($(this));
    console.log($(this).attr('lat'))
});

You will have to look at the object get it's attributes etc... BUT this is how you will be able to drill into it.

Here's a jsfiddle for view:

http://jsfiddle.net/ubj6nkgr/

Alternatively, you can select "place" elements within the xml selector context:

var $xml = $(xml).find("[name='Glasgow']");
var $places = $('place', $xml)
$places.each(function() { console.log($(this)); });

Both examples are in jsfiddle.

As far as the object, I had to think about this: According to this Find closest longitude and latitude in array? you need to compute the distance FIRST and have that in the data structure, so you could either loop through places every time (traversing the DOM), which I suspect is not the most efficient, or you can have a list of key values, the keys being the computed distance and the values to that key specific to each place. Sort the keys by shortest select the first key and you have the closest place.

How to iterate over an xml element's direct children in javascript, saving values of specific attributes?

1 Answers1