Using Domain values in your App

[ReneRubalcava]

So you're chugging away at your awesome ArcGIS JavaScript application. You have some nice custom tools in place, you may even have some search capabilities going on, this thing looks cool. You go to click on a feature on the map and you've got all the important field information... except that you have numbers where maybe values should be showing up?

Well that the heck is that all about? What does that number even mean? So you go and look at the map service and you see that this field has a domain associated with it. Maybe you look at another application where this service is edited and you notice that the attribute inspector in the editor has the correct domain values and now you're just scratching your head wondering how to get those values. Don't worry, they're there...somewhere.

Field Fishing

Lucky for us, the FeatureLayer has a fields property we can use to get not only the domain values, but also the alias names, which are nice human readable descriptions of the field. It's not exactly in the optimal format to just drop in and use, but with a little work you can make it handle your data with ease. You may want to create a hash table to easily associate the coded values with the domain values.

var fieldMap = {};
featureLayer.on('load', function() {
  // iterate the fields of the Layer
  featureLayer.fields.filter(function(x) {
    return !!x.domain; // force value to boolean. only care about domains here
  }).map(function(x) { // map fields with domains
    fieldMap[x.name] = {}; // hash table
    fieldMap[x.name].values = {}; // will hold domain values
    fieldMap[x.name].alias = x.alias; // nice display name
    x.domain.codedValues.map(function(a) { // map over the codedValues
      fieldMap[x.name].values[a.code] = a.name; // save domain
    });
  });
});

The key here is to iterate over the fields of the layer and store the coded value as the key to the domain value. This will make lookup of the values much easier in the next step.

We have a method that defines the content of the popup when it gets clicked. We can use the hash table of domain values to make this a simple task.

function getTextContent(graphic){
  // get keys of the attributes
  // *Note - you may need a shim for your browser
  var elems = Object.keys(graphic.attributes).map(function(x) {
    var attr = graphic.attributes;
    var field = fieldMap;
    if (field) {
      return "<b>" + field.alias + "</b>: " + field.values[attr];
    } else {
      return false;
    }
  }).filter(function(x) { return x; }); // only return valid results
  return elems.join('<br />');
}

So in this sample, we use Object.keys‌ (note - you may need to shim this method) to get the keys of the attributes. You can use the keys to get the matching set of coded and domain values, along with the alias for the field, and compose a simple DOM element to display in the InfoWindow. The result of this technique now display the InfoWindow like below.

You can see a full demo of this sample here.

It just need a little massaging

Sometimes when working with data from ArcGIS Server and such you may need to massage your results to display as you want them to. It's not difficult to do and once you do this a couple of times, it becomes like second nature, but I know from experience how frustrating it can be to try and navigate the documentation to try and solve this simple task. I hope this saves you a step or two. This isn't necessarily the only way to accomplish this, but I thought it was the most straight-forward example.

For more tips and tricks on geodev, check out my blog.