Creating selector menu from array of objects

Question

I'm trying to create a selector menu from an array of ojbects. Here is a sample of the object:

let states = [
      {id: 1, state: "Alabama", district: "1st District", url:"Alabama_1st.pdf"},
      {id: 2, state: "Alabama", district: "2nd District", url:"Alabama_1st.pdf"},
      {id: 3, state: "Alabama", district: "3rd District", url:"Alabama_1st.pdf"},
      {id: 4, state: "Alabama", district: "4th District", url:"Alabama_1st.pdf"},
      {id: 5, state: "Alabama", district: "5th District", url:"Alabama_1st.pdf"},
      {id: 6, state: "Alabama", district: "6th District", url:"Alabama_1st.pdf"},
      {id: 7, state: "Alabama", district: "7th District", url:"Alabama_1st.pdf"},
      {id: 9, state: "Alaska", district: "Statewide District", url:"Alaska_1st.pdf"},
      {id: 10, state: "Arizona", district: "1st District", url:"Arizona_1st.pdf"},
      {id: 11, state: "Arizona", district: "2nd District", url:"Arizona.2nd.pdf"},
      {id: 12, state: "Arizona", district: "3rd District", url:"Arizona_3rd.pdf"},

I have the following jQuery so far but am struggling to get the states.state and states.district to populate in my selector menu. My console log is coming back correct so I know I am accessing the data, just can't get it to append to my selector menu.

<script>         
        for(let i = 0; i < states.length; i++) {
           if(states[i].id > 0){
             $("#listed_states").append(states[i].state +" "+ states[i].district);
              console.log(states[i].state +" "+ states[i].district);
            }
          }
</script>

<body>

    <select>
      <option>Find Your District Here<option>
      <option id="listed_states"> <option>
    </select>
</body>

I'll be adding an .change() function to this after it fires to load a url with a _target.

Move the js code to a line before </body> or use $(document).ready(), check this — kip
– kip, Commented Nov 15, 2017 at 18:47

devlin carnate · Accepted Answer · 2017-11-15 18:49:06Z

3

You should append to the select element, not the option. You also need to create the option element in jQuery.

HTML

<select id="listed_states">
  <option>Find Your District Here</option>
</select>

jQuery

$(document).ready(function() {
  for (let i = 0; i < states.length; i++) {
    if (states[i].id > 0) {
      var option = $("<option>", {
        text: states[i].state + " " + states[i].district,
        value: states[i].id
      });
      $('#listed_states').append($(option));
    }
  }
});

Don't forget to wrap your code that is appending the options in $(document).ready so that it waits for the DOM to load before executing (since you are appending to an element in the DOM)

Here is a Fiddle Demo: https://jsfiddle.net/zephyr_hex/bztgwubf/

answered Nov 15, 2017 at 18:49

devlin carnate

8,6617 gold badges55 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

OsuDani Over a year ago

You're thebomb.com! Thanks for the help. Worked like a charm. I did something like this previously in Ruby but added the id to my option and that worked. Do you know why it has to be on the select and not the option?

devlin carnate Over a year ago

@OsuDani : If you append to the option, you are adding something to the option that has the id. You could append AFTER the option with the id.

OsuDani Over a year ago

Gotcha - Thanks for the explainer.

trincot · Accepted Answer · 2017-11-15 18:56:43Z

Some issues:

The id should be on the select element, not on the option element, which you don't need.
The option tags do not have a closing tag: you actually open a second one each time
The code should execute when the document has loaded
You need to wrap the texts in option tags

You can use append once, and provide it an array:

let states = [ {id: 1, state: "Alabama", district: "1st District", url:"Alabama_1st.pdf"}, {id: 2, state: "Alabama", district: "2nd District", url:"Alabama_1st.pdf"}, {id: 3, state: "Alabama", district: "3rd District", url:"Alabama_1st.pdf"}, {id: 4, state: "Alabama", district: "4th District", url:"Alabama_1st.pdf"}, {id: 5, state: "Alabama", district: "5th District", url:"Alabama_1st.pdf"}, {id: 6, state: "Alabama", district: "6th District", url:"Alabama_1st.pdf"}, {id: 7, state: "Alabama", district: "7th District", url:"Alabama_1st.pdf"}, {id: 9, state: "Alaska", district: "Statewide District", url:"Alaska_1st.pdf"}, {id: 10, state: "Arizona", district: "1st District", url:"Arizona_1st.pdf"}, {id: 11, state: "Arizona", district: "2nd District", url:"Arizona.2nd.pdf"}, {id: 12, state: "Arizona", district: "3rd District", url:"Arizona_3rd.pdf"}];

$(function () {      
    $("#listed_states").append(
        $.map(states, function (state) {
            return $('<option>').text(state.state + " " + state.district);
        })
    );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="listed_states">
    <option>Find Your District Here</option>
</select>

Collectives™ on Stack Overflow

Creating selector menu from array of objects

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related