Reference An Object Name from User Selected Input

Question

I'm attempting to alert the keys (NOT values) of an object specified by a user selected value but I'm having no luck. I can successfully alert the keys if I manually input the object name in the for loop. Heres the snippet of my code:

<select id="state" class="pure-input-1-2" onchange="populateAirport(this.value)">
  <option value = ""></option>
  <option value = "AL">AL</option>
  <option value = "AK">AK</option>
</select>

function populateAirport(selectedValue){
  AL = {"Birmingham–Shuttlesworth International Airport":"BHM","Huntsville International Airport":"HSV"}
  AK = {"Ted Stevens Anchorage International Airport":"ANC","Fairbanks International Airport":"FAI","Juneau International Airport":"JNU","Ketchikan International Airport":"KTN"}

  for(var i in selectedValue){//if I replaced 'selectedValue' with 'AL' I alert the keys in the object just fine
        alert(i);
  }
}

I just want to be a to dynamically reference an object based on the selected value. Thanks in advance for your help.

when you place `selectedValue` in a for loop the way you are doing it, it assumes `selectedValue` is an array. In reality, your selectedValue is just a string "AL", "AK".. thats the problem.. what are you trying to do with this loop? Im assuming, what you are trying to do is when the user changes the select dropdown, then you get the contents of the object.. but what do you want to do with the object? Not to mention, you also have not declared those `AL`, `AK` variables — CodeGodie, Mar 04 '15 at 18:44
`AL` and `AK` are JavaScripts objects. Nothing you posted is related to JSON in any way. — Felix Kling, Mar 04 '15 at 18:44
More duplicates: http://stackoverflow.com/q/5117127/218196, http://stackoverflow.com/q/724857/218196 — Felix Kling, Mar 04 '15 at 18:46
I'm trying to populate a drop down menu with the list of int'l airports in a particular state. and when an airport is selected, a URL containing the airport code is sent to get JSON data — Std_BullAlpha, Mar 04 '15 at 18:49

CodeGodie · Answer 1 · 2015-03-04T19:06:55.447

in that case this is what I would do:

HTML:

<select id="state" class="pure-input-1-2"   onchange="populateAirport(this.value)">
    <option value = ""></option>
    <option value = "AL">AL</option>
    <option value = "AK">AK</option>
</select>
<select id="airports"></select>

JS:

function populateAirport(selectedValue) {
    $('#airports').empty();

    var airports = {
        "AL": {
            "Birmingham–Shuttlesworth International Airport": "BHM",
            "Huntsville International Airport": "HSV"
        },
        "AK": {
            "Ted Stevens Anchorage International Airport": "ANC",
            "Fairbanks International Airport": "FAI",
            "Juneau International Airport": "JNU",
            "Ketchikan International Airport": "KTN"
        }
    };
    $.each(airports[selectedValue], function(key, val) {
        var opt = "<option value='" + val + "'>" + key + "</option>";
        $('#airports').append(opt);
    });
}

Alternitavely, your loop can also be like this:

for(var key in airports[selectedValue]){
     var opt = "<option value='" + airports[selectedValue][key] + "'>" + key + "</option>";
     $('#airports').append(opt);
}

Reference An Object Name from User Selected Input

1 Answers1