Populate select drop-down using object (JavaScript or jQuery)

Question

I'm trying to populate the options of a select drop-down using jQuery, and I've been partially successful, except for one of extra that I would like to add to it.

This is the object:

var test =[  
   {  
      "Issue":[  
         "A producers",
         "A producers",
         "H producers",
         "I producers",
         "Limited resource producers",
         "Organic producers",
         "Producers MM",
         "Producers MM"
      ],
      "Activity Type":[  
         "Career Fairs",
         "Career Fairs",
         "Outreach",
         "Targeted States Programs",
         "Partnership Programs",
         "Education",
         "Career Fairs",
         "Targeted States Programs"
      ],
      "Minority Serving Institute":[  
         "A",
         "DD",
         "B",
         "HSI",
         "DD",
         "A",
         "HSI",
         "B"
      ],
      "Leading Office":[  
         "DAIS",
         "RMED",
         "RMSD",
         "RMSD",
         "DAIS",
         "RMSD",
         "RMED",
         "RMED"
      ],
      "Location":[  
         "AAAAA",
         "TEST",
         "DFDFFF",
         "MIAMI",
         "45tw45t ",
         "EEEEEEE",
         "NEW ORLEANS",
         "RTRTRTR"
      ],
      "State":[  
         "Alaska",
         "Alaska",
         "Arizona",
         "Florida",
         "Alaska",
         "Kentucky",
         "Louisiana",
         "Iowa"
      ]
   }
];

To populate the options I use:

var prev;
for (var key in test) {
var obj = test[key];
for (var w in obj) {
var obj2 = obj[w];

for (var z in obj2) {
  var obj3 = obj2[z];


  if (prev != obj3) {
    prev = obj3;
    $('.filter').append($("<option />").val(obj3).text(obj3));

  }

}

 }}

This is my question: How can I add to my drop down options groups adding "Issues", "Activity Type"... etc.,and under each option group its respective properties?

Fiddle here

Thanks in advance.

Answer 1

Just use w (e.g. 'Issues') to add a <optgroup> element and use that label to add the options to the correct group.

var test = [{
"Issue": ["A producers", "A producers", "H producers", "I producers", "Limited resource producers", "Organic producers", "Producers MM", "Producers MM"],
"Activity Type": ["Career Fairs", "Career Fairs", "Outreach", "Targeted States Programs", "Partnership Programs", "Education", "Career Fairs", "Targeted States Programs"],
"Minority Serving Institute": ["A", "DD", "B", "HSI","DD", "A", "HSI", "B"],
"Leading Office": ["DAIS", "RMED", "RMSD", "RMSD", "DAIS", "RMSD", "RMED", "RMED"],
"Location": ["AAAAA", "TEST", "DFDFFF", "MIAMI", "45tw45t ", "EEEEEEE", "NEW ORLEANS", "RTRTRTR"],
"State": ["Alaska", "Alaska", "Arizona", "Florida", "Alaska", "Kentucky", "Louisiana", "Iowa"]
}];

for (var key in test) {
  var obj = test[key];

  for (var w in obj) {
    var obj2 = obj[w];
    $('.filter').append($("<optgroup />").attr({'label': w}));

    for (var z in [...new Set(obj2)]) {
      var obj3 = obj2[z];
      $('.filter optgroup[label="'+w+'"]').append($("<option />").val(obj3).text(obj3));
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="filter"></select>

Answer 2

var test = [{
"Issue": ["A producers", "A producers", "H producers", "I producers", "Limited resource producers", "Organic producers", "Producers MM", "Producers MM"],
"Activity Type": ["Career Fairs", "Career Fairs", "Outreach", "Targeted States Programs", "Partnership Programs", "Education", "Career Fairs", "Targeted States Programs"],
"Minority Serving Institute": ["A", "DD", "B", "HSI","DD", "A", "HSI", "B"],
"Leading Office": ["DAIS", "RMED", "RMSD", "RMSD", "DAIS", "RMSD", "RMED", "RMED"],
"Location": ["AAAAA", "TEST", "DFDFFF", "MIAMI", "45tw45t ", "EEEEEEE", "NEW ORLEANS", "RTRTRTR"],
"State": ["Alaska", "Alaska", "Arizona", "Florida", "Alaska", "Kentucky", "Louisiana", "Iowa"]
}];

var prev;
cat = '';
result = '';
for (var key in test) {
var obj = test[key];
for (var w in obj) {
var obj2 = obj[w];
if (!cat) {
    result+='<optgroup label="' + w +'">';
    cat = w;
}
if ( cat != w) {
	  result+='</optgroup><optgroup label="' + w +'">';
    cat = w;
}

for (var z in obj2) {
  var obj3 = obj2[z];


  if (prev != obj3) {
    prev = obj3;
    result+='<option value="'+obj3+'">'+obj3+'</option>';
 }

}

 }
 }
 result+='</optgroup>';
 
 $('.filter').append(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<select class="filter">

</select>

Answer 3

You can use the optgroup tag.

const filterElement = $('.filter')[0]; // just for me to get the DOM element
test.forEach(function(list) { // loop through the array
  for (let key in list) {
    let optGroup = document.createElement('optgroup');
    optGroup.setAttribute('label', key); // set the label so that it displays properly
    list[key].forEach(function(value) {
      let option = document.createElement('option');
      option.textContent = value;
      optGroup.appendChild(option); // add option to group
    });

    filterElement.appendChild(optGroup); // add group to select box
  }
});

Working fiddle: https://jsfiddle.net/2gfhv4w8/10/

var test = [{
  "Issue": ["A producers", "A producers", "H producers", "I producers", "Limited resource producers", "Organic producers", "Producers MM", "Producers MM"],
  "Activity Type": ["Career Fairs", "Career Fairs", "Outreach", "Targeted States Programs", "Partnership Programs", "Education", "Career Fairs", "Targeted States Programs"],
  "Minority Serving Institute": ["A", "DD", "B", "HSI", "DD", "A", "HSI", "B"],
  "Leading Office": ["DAIS", "RMED", "RMSD", "RMSD", "DAIS", "RMSD", "RMED", "RMED"],
  "Location": ["AAAAA", "TEST", "DFDFFF", "MIAMI", "45tw45t ", "EEEEEEE", "NEW ORLEANS", "RTRTRTR"],
  "State": ["Alaska", "Alaska", "Arizona", "Florida", "Alaska", "Kentucky", "Louisiana", "Iowa"]
}];
const filterElement = document.getElementById('filter');
test.forEach(function(list) {
  for (let key in list) {
    let optGroup = document.createElement('optgroup');
    optGroup.setAttribute('label', key);
    list[key].forEach(function(value) {
      let option = document.createElement('option');
      option.textContent = value;
      optGroup.appendChild(option); // add option to group
    });

    filterElement.appendChild(optGroup); // add group to select box
  }
});

<select id="filter"></select>