CODEWITHSUNDEEP
jqueryarraysobject
OsuDani
OsuDani

Reputation: 98

Creating selector menu from array of objects

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.

Upvotes: 0

Views: 91

Answers (2)

trincot
trincot

Reputation: 350866

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>

Upvotes: 1

devlin carnate
devlin carnate

Reputation: 8612

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/

Upvotes: 3

Related Questions