CODEWITHSUNDEEP
jqueryxml
methuselah
methuselah

Reputation: 13206

Get jQuery to parse through multiple XML nodes but output as one

Is it possible to get use jQuery to parse through multiple XML nodes but output the result as one.

E.g. the example at http://jqueryui.com/autocomplete/#xml only parses through the name and countryName nodes, but I would like it to parse through the rest (i.e. geonameId, lng, lat and countryCode) but output it as desired.

jQuery 

 $.ajax({
        url: "london.xml",
        dataType: "xml",
        success: function (xmlResponse) {
            var data = $("geoname", xmlResponse).map(function () {
                return {
                    value: $("name", this).text() + ", " + ($.trim($("countryName", this).text()) || "(unknown country)"),
                    id: $("geonameId", this).text()
                };
            }).get();
            $("#match").autocomplete({
                source: data,
                minLength: 0,
                select: function (event, ui) {
                    log(ui.item ?
                        "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
                        "Nothing selected, input was " + this.value);
                }
            });
        }
    });

XML 

<geonames>
  <geoname>
    <name>London</name>
    <lat>51.5084152563931</lat>
    <lng>-0.125532746315002</lng>
    <geonameId>2643743</geonameId>
    <countryCode>GB</countryCode>
    <countryName>United Kingdom</countryName>
    <fcl>P</fcl>
    <fcode>PPLC</fcode>
  </geoname>
  <geoname>
    <name>London</name>
    <lat>42.983389283</lat>
    <lng>-81.233042387</lng>
    <geonameId>6058560</geonameId>
    <countryCode>CA</countryCode>
    <countryName>Canada</countryName>
    <fcl>P</fcl>
    <fcode>PPL</fcode>
  </geoname>
  <geoname>
    <name>East London</name>
    <lat>-33.0152850934643</lat>
    <lng>27.9116249084473</lng>
    <geonameId>1006984</geonameId>
    <countryCode>ZA</countryCode>
    <countryName>South Africa</countryName>
    <fcl>P</fcl>
    <fcode>PPL</fcode>
  </geoname>
</geonames>

Upvotes: 0

Views: 562

Answers (1)

Oskar
Oskar

Reputation: 2562

Yes, I can create lang, lat and the rest of the xml:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - XML data parsed once</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
  </style>
  <script>
  $(function() {
    function log( message ) {
      $( "<div/>" ).text( message ).prependTo( "#log" );
      $( "#log" ).attr( "scrollTop", 0 );
    }

    $.ajax({
      url: "london.xml",
      dataType: "xml",
      success: function( xmlResponse ) {
        var data = $( "geoname", xmlResponse ).map(function() {
          return {
            value: $( "name", this ).text() + ", " +
              ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
            id: $( "geonameId", this ).text(),
            lat:$( "lat", this ).text(),
            lng:$( "lng", this ).text()
          };
        }).get();
        $( "#birds" ).autocomplete({
          source: data,
          minLength: 0,
          select: function( event, ui ) {
            log( ui.item ?
              "Selected: " + ui.item.value + ", geonameId: " + ui.item.id+", lat: "+ ui.item.lat + ui.item.id+", lang: "+ ui.item.lng :
              "Nothing selected, input was " + this.value );
          }
        });
      }
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="birds">London matches: </label>
  <input id="birds" />
</div>

<div class="ui-widget" style="margin-top: 2em; font-family: Arial;">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>


</body>
</html>

Upvotes: 3

Related Questions