Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by John Weland
John Weland
42,478 Points

iterating over an array and selecting a select option that matches

So I am using jQuery...

I have a json object that looks like this

  {
    access_list: {},
    role_list: {
      sys admin: true,
      system administrator: true
    },
  site_list: {
    0: {
      id: 0,
      name: "All Sites",
      code: "NEEDS_TO_BE_SET"
    },
    3681: {
      id: 3681,
      name: "Mohave, AZ",
      code: "MAZ"
    },
    3682: {
      id: 3682,
      name: "Salt Lake, UT",
      code: "SLUT"
    }
  },
  username: "bsmith",
  first_name: "Bob",
  last_name: "Smith",
  organization: "Acme",
  email_addr: "bsmith@acme.com",
  contact_info: "",
  disabled: false,
  password_dttm: "2015-03-10 15:50:01.740397",
  role_level: 0
}

Then I have a select box (multiselect) called #roleBox that has a list of options. I need to iterate over the JSON object for role_list and for each key that matches an option in the select I need to make that option selected.

I have a second select box (multiselect) called #siteBox I have to iterate over the JSON's site_list and if a key is 0 select only the first option in #siteBox else find the options in #siteBox that match the keys in sitelist and make those options selected.

This is driving me nuts hopefully Andrew Chalkley knows this one.

1 Answer

Alec Plummer
Alec Plummer
15,181 Points
Alec Plummer
Alec Plummer
15,181 Points

Alright, so...this one is a little confusing lol. Hope some of this helps and I'm not completely missing the mark here!

The html..

<select id="roleBox">
    <option>false</option>
    <option>red</option>
    <option>true</option>
    <option>blue</option>
</select>

I'm using data as my mock json file. What I'm doing here is looping first through the data.role_list object then looping through all of the #roleBox options. If there is a match, the #roleBox changes its current selected option to the matching value in your role_list object.

var data = {
    role_list: {
        sysAdmin: true,
        systemAdmin: true
    }
};

$.each(data.role_list, function(i, item) {
    $('#roleBox > option').each(function() {
        if ($(this).val() === 'true') {
            $(this).prop('selected', true);
        }
    });
});

A similar approach will work for your second part of the question as well, just change what you're looping through and exit the loop when you find a match

$.each(data.site_list, function(i, item) {
    $('#siteBox > option').each(function() {
        if ($(this).val() === 0) {
            $(this).prop('selected', true);
            return;
        }
    });
});
John Weland
John Weland
42,478 Points

Right on the money! I did have to make a small change on the second (site iterator) so that is === 0 was false then loop over each other block (non 0 block)

Alec Plummer
Alec Plummer
15,181 Points
Alec Plummer
Alec Plummer
15,181 Points

Awesome! Glad I could help.