CODEWITHSUNDEEP
javascriptjqueryarraysjsonjavascript-objects
fish_r
fish_r

Reputation: 697

Store options from select in JSON/Array/Object using jQuery

I'm hoping to get some help with the following:

So, I have this in my HTML structure (Generated via WordPress)

<select class="items">
    <option value="0" selected="selected">All Types Of Staff</option>
    <option class="level-0 main-option-1" value="12">Main Option 1</option>
    <option class="level-1 sub-option-1" value="29">Sub Option 1</option>
    <option class="level-1 sub-option-2" value="30">Sub Option 2</option>
    <option class="level-0 main-option-2" value="11" selected="selected">Main Option 2</option>
    <option class="level-1 sub-option-1" value="28">Sub Option 1</option>
    <option class="level-1 sub-option-2" value="25">Sub Option 2</option>
    <option class="level-1 sub-option-3" value="26">Sub Option 3</option>
    <option class="level-1 sub-option-4" value="27">Sub Option 4</option>
    <option class="level-0 main-option-3" value="10">Main Option 3</option>
    <option class="level-1 sub-option-1" value="22">Sub Option 1</option>
    <option class="level-1 sub-option-2" value="23">Sub Option 2</option>
</select>

Ideally, using jQuery (I know, but the project's already using it...)...

What I want to do, is everything that has a class of 'level-0', I'd like to add to an array/JSON object/something I can iterate over, With everthing underneath that has level-1, added as a sub-type to that...

Ideally storing something like the following:

{
    option {
         label: 'Main Option 1',
         items: ['Sub Option 1', 'Sub Option 2']
    },
    option: {
        label: 'Main Option 2',
        items: ['Sub Option 1', 'Sub Option 2', 'Sub Option 3', 'Sub Option 4']
    },
    option: {
        label: 'Main Option 3',
        items: ['Sub Option 1', 'Sub Option 2']
    }
}

Etc, The idea is that we can then hide the select button, and only have sub-options available as buttons, with the labels as the headings.

for example:


<h2>Main Option 1</h2>
<div class="button">Sub Option 1</div>
<div class="button">Sub Option 2</div>

<h2>Main Option 2</h2>
<div class="button">Sub Option 1</div>
<div class="button">Sub Option 2</div>
<div class="button">Sub Option 3</div>
<div class="button">Sub Option 2</div>

I'm pretty confident on managing the output, I just can't seem to figure out how, or the best way I should store this...

Could anyone help me out here? I'm not new to jQuery at all, but pretty new to creating JS objects myself.

Thanks Guys

Upvotes: 0

Views: 164

Answers (1)

Nick
Nick

Reputation: 147146

You can iterate over each of the level-0 options within your select, adding their text as the label and their sibling level-1 options texts as items to an object. Then you can push those objects to an array to generate the structure you want:

let options = [];
$('.items option.level-0').each(function(_, el) {
  let label = $(el).text();
  let items = [];
  el = $(el).next();
  while (el.length && el.attr('class').split(/\s+/).includes('level-1')) {
    items.push(el.text());
    el = el.next();
  }
  options.push({
    label,
    items
  });
});
console.log(options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="items">
  <option value="0" selected="selected">All Types Of Staff</option>
  <option class="level-0 main-option-1" value="12">Main Option 1</option>
  <option class="level-1 sub-option-1" value="29">Sub Option 1</option>
  <option class="level-1 sub-option-2" value="30">Sub Option 2</option>
  <option class="level-0 main-option-2" value="11" selected="selected">Main Option 2</option>
  <option class="level-1 sub-option-1" value="28">Sub Option 1</option>
  <option class="level-1 sub-option-2" value="25">Sub Option 2</option>
  <option class="level-1 sub-option-3" value="26">Sub Option 3</option>
  <option class="level-1 sub-option-4" value="27">Sub Option 4</option>
  <option class="level-0 main-option-3" value="10">Main Option 3</option>
  <option class="level-1 sub-option-1" value="22">Sub Option 1</option>
  <option class="level-1 sub-option-2" value="23">Sub Option 2</option>
</select>

Upvotes: 1

Related Questions