I am trying to figure out a good way to retrieve the fields from an ArcGIS REST service. I first create a FeatureLayer from the a feature server url. When I console.log the feature layer, I see that it has fields, but when I try to console.log(featureLayer.fields) it is just null. I need the field information to create a popup template, but I am trying to find a way to avoid having to hard-code the field information. What is a good way of going about this? html lang = " en " > head > meta charset = " UTF-8 " > title > Document title > style > html, body, #viewDiv { padding : 0 ; margin : 0 ; height : 100% ; width : 100% ; } style > link rel = " stylesheet " href = " https://js.arcgis.com/4.13/esri/css/main.css " > script src = " https://js.arcgis.com/4.13/ " > script > head > body > div id = " viewDiv " > div > script > require ( [ "esri/Map" , "esri/views/MapView" , "esri/widgets/Legend" , "esri/PopupTemplate" , "esri/layers/FeatureLayer" , "esri/Graphic" ] , function ( Map , MapView , Legend , PopupTemplate , FeatureLayer , Graphic ) { var map = new Map ( { basemap : "gray" } ) ; var view = new MapView ( { container : "viewDiv" , map : map } ) ; var featureLayer = new FeatureLayer ( { url : "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/earthquakes_geojson/FeatureServer/0" } ) ; console . log ( featureLayer ) ; console . log ( featureLayer . fields ) ; // add the layer to the map map . add ( featureLayer ) ; } ) ; script > body > html >

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Get fields from featureLayer created from rest service?

VincentLantaca1

I am trying to figure out a good way to retrieve the fields from an ArcGIS REST service. I first create a FeatureLayer from the a feature server url. When I console.log the feature layer, I see that it has fields, but when I try to console.log(featureLayer.fields) it is just null.

I need the field information to create a popup template, but I am trying to find a way to avoid having to hard-code the field information. What is a good way of going about this?

<SPAN class="doctype token"><!DOCTYPE html></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>html</SPAN> <SPAN class="attr-name token">lang</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>en<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">charset</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>UTF-8<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Document<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
        <SPAN class="selector token">html,
        body,
        #viewDiv</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
            <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
            <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
            <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.13/esri/css/main.css<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.13/<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewDiv<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
        <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/widgets/Legend"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/PopupTemplate"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/Graphic"</SPAN>
    <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> Legend<SPAN class="punctuation token">,</SPAN> PopupTemplate<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>

        <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"gray"</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
            map<SPAN class="punctuation token">:</SPAN> map
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">var</SPAN> featureLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/earthquakes_geojson/FeatureServer/0"</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>featureLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>featureLayer<SPAN class="punctuation token">.</SPAN>fields<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">// add the layer to the map</SPAN>
        map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>featureLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Find more posts tagged with

Accepted answers

kenbuja

You have to wait until the feature layer is ready. You're trying to access its information before it's been created.

featureLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
  console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>featureLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>featureLayer<SPAN class="punctuation token">.</SPAN>fields<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

JohnGrayson

And here's a quick CodePen using the service you mention above:

https://codepen.io/john-grayson/pen/MWowbgX

diaconori

Yes, both load() and then() and when() are methods that other developers including you have suggested but the console spits out an error messaging saying that those doesn't exist on the featureLayer. When I log out the featureLayer to the console, I can see that there is a property called _fields of the type Proxy. If the web map retrieves layers from a FeatureServer REST service, I am able to fetch the _fields property and deconstruct the Proxy object, however, if it is a layer from a MapServer REST service, it is not possible.

We're running our GIS on an ArcGIS Enterprise.

My thread: https://community.esri.com/t5/arcgis-web-appbuilder-questions/fetch-proxy-object-fields-from-featurelayer-object/td-p/1092618

JohnGrayson

Q: did you try my suggestion of waiting for the layer to loaded first?

featureLayer.load().then(() => {
  console.log(featureLayer.title, featureLayer.fields);
});

diaconori

This shouldn't be accepted answer. I am getting the following exception:

TypeError: featureLayer.when is not a function
    at dno_presenter.js?wab_dv=2.20:217
    at LayerNode.js?wab_dv=2.20:127
    at Object.traversal (LayerInfo.js?wab_dv=2.20:156)
    at Object.traversal (LayerNode.js?wab_dv=2.20:126)
    at Object._traversal (LayerStructure.js?wab_dv=2.20:124)
    at Object.traversal (LayerStructure.js?wab_dv=2.20:146)
    at Object.initLayers (dno_presenter.js?wab_dv=2.20:212)
    at Object.initializeLayersWithFields (dno_presenter.js?wab_dv=2.20:495)
    at Object.initComponents (dno_presenter.js?wab_dv=2.20:80)
    at Object.initPresenter (Widget.js?wab_dv=2.20:22)

Code:

this.layerStructure.traversal((layerNode) => {
                        console.log("layerNode", layerNode);
                        let featureLayerUrl = layerNode?._layerInfo?.layerObject?.url;
                        let featureLayer = new FeatureLayer(featureLayerUrl);
                        console.log("featureLayer", featureLayer);
                        featureLayer.when(() => {
                            console.log(featureLayer);
                            console.log(featureLayer.fields);
                        });
                    }

diaconori

Doesn't work. I am getting the following error:

TypeError: featureLayer.load is not a function
at dno_presenter.js?wab_dv=2.20:217
at LayerNode.js?wab_dv=2.20:127
at Object.traversal (LayerInfo.js?wab_dv=2.20:156)
at Object.traversal (LayerNode.js?wab_dv=2.20:126)
at Object._traversal (LayerStructure.js?wab_dv=2.20:124)
at Object.traversal (LayerStructure.js?wab_dv=2.20:146)
at Object.initLayers (dno_presenter.js?wab_dv=2.20:212)
at Object.initializeLayersWithFields (dno_presenter.js?wab_dv=2.20:494)
at Object.initComponents (dno_presenter.js?wab_dv=2.20:80)
at Object.initPresenter (Widget.js?wab_dv=2.20:22)

Code:

this.layerStructure.traversal((layerNode) => {
                        console.log("layerNode", layerNode);
                        let featureLayerUrl = layerNode?._layerInfo?.layerObject?.url;
                        let featureLayer = new FeatureLayer(featureLayerUrl);
                        console.log("featureLayer", featureLayer);
                        featureLayer.when(() => {
                            console.log(featureLayer);
                            console.log(featureLayer.fields);
                        });
                    }

JohnGrayson

Try to ensure the layer is loaded:

featureLayer.load().then(() => {
  console.log(featureLayer.title, featureLayer.fields);
});

diaconori

when doesn't exist on the featureLayer. I am getting an error whenever it is about to fire.

kenbuja

You have to wait until the feature layer is ready. You're trying to access its information before it's been created.

featureLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
  console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>featureLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>featureLayer<SPAN class="punctuation token">.</SPAN>fields<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.