Editor.js:426 Uncaught TypeError: Cannot read properties of undefined (reading 'layer')

WilliamShuart — Tue, 20 Sep 2022 00:35:39 GMT

I have an editing app and I am getting a type error thrown. I have layers defined and pointing to a hosted serviuce/map.

at Editor.js:426:139
at Array.find (<anonymous>)
at J (Editor.js:426:129)
at Editor.js:441:414
at Array.map (<anonymous>)
at F.map ((index):64:265)
at v.get (Editor.js:441:335)
at Object.u [as runTracked] ((index):160:183)
at t.getComputed ((index):154:279)
at p.get ((index):146:326)
(anonymous) @ Editor.js:426
J @ Editor.js:426
(anonymous) @ Editor.js:441
F.map @ (index):64
get @ Editor.js:441
u @ (index):160
t.getComputed @ (index):154
p.get @ (index):146
c @ (index):135
d @ (index):135
(anonymous) @ (index):171
u @ (index):160
t @ (index):205
r @ (index):170
q @ (index):170
n @ (index):178
(anonymous) @ (index):182

code:

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title> Area of roof Calculation based on Slope </title> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.23/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .esri-editor .esri-item-list__scroller { max-height: 350px; } </style> <script> require(["esri/WebMap", "esri/views/MapView", "esri/popup/ExpressionInfo", "esri/widgets/Editor", "esri/widgets/Search", "esri/layers/FeatureLayer"], ( WebMap, MapView, ExpressionInfo, Editor, Search, FeatureLayer ) => { let EntireStructureLayer, DamagedAreasLayer; // Create a map from the referenced webmap item id const webmap = new WebMap({ portalItem: { id: "6a98a932b16142ae9d262e3e48a021a3" } }); const view = new MapView({ container: "viewDiv", map: webmap }); const featureLayerROE = new FeatureLayer({ url: "https://services.arcgis.com/9MNW08Jq46DD7XQg/arcgis/rest/services/brms_09122022_WFL1/FeatureServer/5", popuptemplate: { title: "ROE Number {roeidpk}", overwriteActions: true } }); view.when(() => { view.map.layers.forEach((layer) => { if (layer.title === "Entire Structure") { EntireStructureLayer = { layer: EntireStructure, formTemplate: { // autocasts to FormTemplate elements: [ { type: "field", fieldName: "ROE_IDPK", label: "ROE Number" }, { // autocasts to FieldElement type: "field", fieldName: "Area_SQFT", label: "Area in Square Feet", // expression defined in expressionInfos valueExpression: "area" }, { type: "field", fieldName: "Pitch_Slope", label: "Pitch of Roof" }, { type: "field", fieldName: "Area_pitch_SQFT", label: "Area based on Pitch (FT)", // expression defined in expressionInfos valueExpression: "Pitchft2", }, { type: "field", fieldname: "RoofType", label: "Type of Roof" }, ], expressionInfos: [{ name: "area", title: "Area SQ FT", expression: "AreaGeodetic($feature,'feet')" }, { name: "Pitchft2", title: "Area based on Pitch (FT)", expression:' "$feature.Pitch_Slope==1, $feature.Area_SQFT*1.031, $feature.Pitch_Slope==2, $feature.Area_SQFT*1.158, $feature.Pitch_Slope==3, $feature.Area_SQFT*1.414, $feature.Pitch_Slope==4, $feature.Area_SQFT*1.944, $feature.Area_SQFT)"' } ] } }; } else { if(layer.title === "DamagedAreasmultipatch") DamagedAreasLayer = { layer: DamagedAreasmultipatch, formTemplate: { // autocasts to FormTemplate elements: [ { type: "field", fieldName: "ROE_IDPK", label: "ROE Number" }, { // autocasts to FieldElement type: "field", fieldName: "Area_Ft2", label: "Area in Square Feet", // expression defined in expressionInfos valueExpression: "area1" }, { type: "field", fieldName: "Pitch", label: "Pitch of Roof" }, { type: "field", fieldName: "Area_pitch_ft2", label: "Area based on Pitch (FT)", // expression defined in expressionInfos valueExpression: "Pitchft2" }, { type: "field", fieldName: "NumPanels", label: "Number of Plywood Panels Needed" }, { type: "field", fieldName: "Length_rafters_area", label: "Length of Rafters Needed" } ], expressionInfos: [{ name: "area1", title: "Area SQ FT", expression: "AreaGeodetic($feature,'feet')" }, { name: "Pitchft2", title: "Area based on Pitch (FT)", expression:' "$feature.Pitch==1, $feature.Area_Ft2*1.031, $feature.Pitch==2, $feature.Area_Ft2*1.158, $feature.Pitch==3, $feature.Area_Ft2*1.414, $feature.Pitch==4, $feature.Area_Ft2*1.944, $feature.Area_Ft2)"' } ] } }; } }); const searchWidget = new Search({ view: view, allPlaceholder: "Search", includeDefaultSources: false, sources: [ { layer: featureLayerROE, searchFields: ["roeidpk"], displayField: "ROE IDPK", exactMatch: true, outFields: ["roeidpk", "flagroe", "invoicenumber"], name: "ROE IDPK", placeholder: "example: 278585" } ] }); const editor = new Editor({ layerInfos: [EntireStructureLayer, DamagedAreasLayer], view: view, }); // Add the widget to the view view.ui.add(editor, "top-right"); view.ui.add(searchWidget, "bottom-right") }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

Thanks in advance!

Re: Editor.js:426 Uncaught TypeError: Cannot read properties of undefined (reading 'layer')

ReneRubalcava — Tue, 20 Sep 2022 15:01:29 GMT

You have a couple of spots where you're passing a layer, but it's not defined.

if (layer.title === "Entire Structure") { EntireStructureLayer = { layer: EntireStructure, // EntireStructure undefined if(layer.title === "DamagedAreasmultipatch") // missing {} too DamagedAreasLayer = { layer: DamagedAreasmultipatch, // DamagedAreasmultipatch undefined

In those cases, if the title matches, you can just pass the layer instance for the editor to use.

Re: Editor.js:426 Uncaught TypeError: Cannot read properties of undefined (reading 'layer')

WilliamShuart — Tue, 20 Sep 2022 15:32:03 GMT

I'm not sure that I'm following. Isn't the "if (layer.title ==="xxx), etc." the layer definition?

Re: Editor.js:426 Uncaught TypeError: Cannot read properties of undefined (reading 'layer')

UndralBatsukh — Tue, 20 Sep 2022 15:35:23 GMT

The error is being thrown because you are not finding the right layers from your web map.

First of all, the layers you are looking for are in a group layer: https://www.arcgis.com/sharing/rest/content/items/6a98a932b16142ae9d262e3e48a021a3/data?f=json

So you need to loop through the layers in your group layer to find the right layers:

webmap.layers.forEach((layer) => { console.log(layer.title, layer.type); if (layer.type === "group") { layer.layers.forEach((subLayer) => { console.log(subLayer.title); if (subLayer.title === "Entire Structure") { EntireStructureLayer = { layer: subLayer, } } }); } });

Secondly, you are doing the following where EntireStructure does not exist. You must set this to a valid layer instance. See the code above.

if (layer.title === "Entire Structure") { EntireStructureLayer = { layer: EntireStructure, } }

Lastly, DamageAreasmultipatch does not exist. Please take a look at your web map from the link provided above.

if(layer.title === "DamagedAreasmultipatch")

This codepen shows how Editor can be set up: https://codepen.io/U_B_U/pen/bGMRvmr?editors=1000

The search widget is also throwing an error about Display field and the codepen shows the working version.

Re: Editor.js:426 Uncaught TypeError: Cannot read properties of undefined (reading 'layer')

WilliamShuart — Tue, 20 Sep 2022 19:16:05 GMT

I got it., I see what you are saying now. The expressions are commented out, i *thought* those were right, looks like those aren't either. 🙂 I am seeing errors on this pen for 'name' and 'length'.

topic Re: Editor.js:426 Uncaught TypeError: Cannot read properties of undefined (reading 'layer') in ArcGIS JavaScript Maps SDK Questions

Editor.js:426 Uncaught TypeError: Cannot read properties of undefined (reading 'layer')

Re: Editor.js:426 Uncaught TypeError: Cannot read properties of undefined (reading 'layer')

Re: Editor.js:426 Uncaught TypeError: Cannot read properties of undefined (reading 'layer')

Re: Editor.js:426 Uncaught TypeError: Cannot read properties of undefined (reading 'layer')

Re: Editor.js:426 Uncaught TypeError: Cannot read properties of undefined (reading 'layer')