Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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;
        }
    });
});

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

Awesome! Glad I could help.