Trouble adding and populating field on the fly in ESRI feature layer

Question

I'm trying to build a mashup consisting of a Census tiger web feature layer, and some JSON. I want to make a map of the feature layer, then add a new field to the layer, and populate from the JSON. Here is the url to the feature layer: https://tigerweb.geo.census.gov/arcgis/rest/services/TIGERweb/tigerWMS_ACS2015/MapServer/82

My JSON data is a simple array of objects:

   var data =  [{"P0010001":"4779736","P0050010":"185602","NAME":"Alabama","state":"01"},{"P0010001":"710231","P0050010":"39249","NAME":"Alaska","state":"02"},...]

I then start my webmap, etc:

require([stuff],function(stuff){
    var map = new Map...
    var featurelayer = new FeatureLayer etc
    map.addLayer(featurelayer);
});

Then below this I try to add a field to the layer, and populate with JSON. Here's what i've tried:

for(var i = 0; i < layer.graphics.length; i++)
                            {
                                for(var j = 0; j < new_data.length; j++)
                                {
                                    if(layer.graphics[i].attributes.STATEFP == new_data[j].state)
                                    {
                                        layer.graphics[i].attributes.NEWFIELD = new_data[j].P0010001;
                                    }
                                }
                            }

But this didn't work. I tried logging Object.keys(layer) and got a long list of keys, of which one is graphics, however, graphics doesn't seem to have any information with it.

I also tried calling map.redraw() after the loop, but that didn't help. There is an example similar to what I'm trying to do here: http://cartographicperspectives.org/index.php/journal/article/viewFile/cp76-hunt/1311 and they use arr.forEach, which is apparaenlty part of dojo?? I'm trying to accomplish the join using vanilla js.

So I also tried the layer.attr() method in the ESRI api. Since its a layer method I assume I need an array of graphics to use it. But when I call console.log(layer.graphics.length) i get 0.

So is it possible to programmatically add a field, and do a join such as this to a feature layer? I.e. add a field and populate it from JSON?

Answer 1

I think you're close, just a few notes about what you need to do to get this working:

1. The major note is that you need to wrap your code that looks at the attributes in on on event handler, so you're waiting until the layer's data is actually loaded before you try to change it.
2. I could not find STATEFP in your service ... looks like STATE is what you want.
3. Just a note that you have to include outFields: '*' (or at least all the fields you want to check against) when doing this type of looping. If not, your layer.graphics[i].attributes.STATE will never be found

I have all of the above incorporated into a sample. You can see it working by clicking on Alabama or Alaska and see your "NEWFIELD" in the list:

https://jsfiddle.net/gavinr/cgsken5y/