How do I update this code for Dojo AMD?

ChrisSergent

I was looking at this post by Kelly Hutchins​ a programmatic way to populate a combo box. I have this web service: Layer: Sign (ID: 0)  and I want to populate the items from the MUTCD field; there are over 257 items in the list. How would I change this code to work as AMD and what required statements do I need; I also want the first value to be "" and display as Select One :

function init() {
  queryTask = new esri.tasks.QueryTask
  ("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer/2");

  query = new esri.tasks.Query();
  query.returnGeometry = false;
  query.outFields = ["ZONING_TYPE"];
  query.where = "ZONING_TYPE<> ''";
  queryTask.execute(query,populateList);
 }

function populateList(results) {
  //Populate the ComboBox with unique values
  var zone;
  var values = [];
  var testVals={};

  //Add option to display all zoning types to the ComboBox
  values.push({name:"ALL"})

  //Loop through the QueryTask results and populate an array
  //with the unique values
  var features = results.features;
  dojo.forEach (features, function(feature) {
  zone = feature.attributes.ZONING_TYPE;
  if (!testVals[zone]) {
  testVals[zone] = true;
  values.push({name:zone});
  }
  });
  //Create a ItemFileReadStore and use it for the
  //ComboBox's data source
  var dataItems = {
  identifier: 'name',
  label: 'name',
  items: values
  };
  var store = new dojo.data.ItemFileReadStore({data:dataItems});
  dijit.byId("mySelect").store = store;
  }
  dojo.addOnLoad(init);

ChrisSergent

This question was answered through Esri support. To obtain the coded values to populate a dropdown list, you enter the following code. I included an additional line so that no option would appear to be selected when a dropdown first appears.

//get the domain value
            var domain = app.signLayer.getDomain("BACKING");


            //get the html select by ID
            var select = document.getElementById("backing");


            //clear the current options in select
            for (var option in select) {
                select.remove(option);
            }


            var opt = document.createElement('option');
            opt.innerHTML = "";
            select.appendChild(opt);
            //loop through the domain value to fill the drop down
            for (var i = 0; i < domain.codedValues.length; i++) {
                console.log(domain.codedValues.name);
                ;var opt = document.createElement('option');
                opt.innerHTML = domain.codedValues.name;
                opt.value = domain.codedValues.name;
                select.appendChild(opt);
            }

To go a little further with this, you could create a function with arguments like so:

function populateSelect(x, y) {
        //get the domain value 
        var domain = app.signLayer.getDomain(x);


        //get the html select by ID
        var select = document.getElementById(y);


        //clear the current options in select
        for (var option in select) {
            select.remove(option);
        }


        var opt = document.createElement('option');
        opt.innerHTML = "";
        select.appendChild(opt);
        //loop through the domain value to fill the drop down
        for (var i = 0; i < domain.codedValues.length; i++) {
            console.log(domain.codedValues.name);
            ; var opt = document.createElement('option');
            opt.innerHTML = domain.codedValues.name;
            opt.value = domain.codedValues.name;
            select.appendChild(opt);
        }


    }

And then for each dropdown that you want to populate, you could enter this line of code and replace the values for each line.

 populateSelect("BACKING", "backing");

This will save you around 15 lines of code for each dropdown list that you want to populate.