CODEWITHSUNDEEP
jqueryjsongeonames
Frank
Frank

Reputation: 163

JQuery Map and JSON - Getting Sub Array Elements

I'm using JQuery to get city data from geonames. My problem is when I want to extract the value for sub-array items when using the JQuery map function.

In this example, if I want to get the Wikipedia link, how could I do this?

I tried: wikipedia: item.alternateNames.lang['link']

but didn't expect it would really work. Does anyone know who I can extract the sub array items?

Here are the bits of code:

JSON RESULT

"geonames": [{
"alternateNames": [
  {
    "name": "Rancho Cucamonga",
    "lang": "en"
  },
  {
    "name": "91739",
    "lang": "post"
  },
  {
    "name": "http://en.wikipedia.org/wiki/Rancho_Cucamonga%2C_California",
    "lang": "link"
  }

],
adminCode2": "071",
"countryName": "United States",
"adminCode1": "CA",
"fclName": "city, village,...",
"elevation": 368,
"score": 0.9999999403953552,
"countryCode": "US",
"lng": -117.5931084,
"adminName2": "San Bernardino County",
"adminName3": "",
"fcodeName": "populated place",

JQuery:

$("#city").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function(data) {

                    response($.map(data.geonames, function(item) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name,
                            latitude: item.lat,
                            longitude: item.lng,

                            // problem here: how to get the value for the alternateNames.lang where lang = link
                            wikipedia: item.alternateNames.lang['link']

                        }
                    }))
                }
            })
        },

Upvotes: 1

Views: 23587

Answers (3)

FreeVice
FreeVice

Reputation: 2697

In same accident I find next solve:

Instead calling sub elements lang undo map, you can assigment only parent element wikipedia: item.alternateNames. And after, you can access to nested elements of them in select event of autocomplete.

This is my example:

$("#Customer_Name ").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("LookupCustomers", "Customers")', type: "POST", dataType: "json",
                    data: { searchText: request.term, maxResults: 10 },
                    success: function (data) {

                            response($.map(data, function (item) {

                        //respose($.each(data, function (item

                            return {
                                label: item.Name,
                                value: item.Name,
                                id: item.Id,
                                phone: item.Phone,
                                addressStreet: item.AddressStreet,
                                addressBuilding: item.AddressBuilding,
                                addressHousing: item.AddressHousing,
                                addressFlat: item.AddressFlat,
                                metroStationId: item.MetroStationId,
                                metroStation: item.MetroStation  //trouble was here

                            }
                        }))
                    }
                })
            },
            select: function (event, ui) {
                document.getElementById("Customer_Id").value = ui.item.id;
                document.getElementById("Customer_Name").value = ui.item.value;
                document.getElementById("Customer_Phone").value = ui.item.phone;
                document.getElementById("Customer_AddressStreet").value = ui.item.addressStreet;
                document.getElementById("Customer_AddressBuilding").value = ui.item.addressBuilding;
                document.getElementById("Customer_AddressHousing").value = ui.item.addressHousing;
                document.getElementById("Customer_AddressFlat").value = ui.item.addressFlat;
                document.getElementById("Customer_MetroStationId").value = ui.item.metroStationId;
                document.getElementById("Customer_MetroStation_Name").value = ui.item.metroStation.Name;  //and, trouble was here
            }
        });

Upvotes: 0

BBonifield
BBonifield

Reputation: 5003

Try...

wikipedia: item.alternateNames[2].name

But if you wanted to search them...

var name;
$.each( item.alternateNames, function(){
  if ( this.lang == 'link' ) {
    name = this.name;
    return false;
  }
});

Upvotes: 3

Stephen Watkins
Stephen Watkins

Reputation: 25765

Your alternateNames is an array of objects, so you would have to use an index to retrieve an object from the array. Once you have the object you can retrieve the "lang" field:

item.alternateNames[2].lang

that should return you "link". This is assuming that item is the proper parent object of alternateNames.

Upvotes: 0

Related Questions