applyEdits not working

RabinSubedi · ‎01-13-2021

Hello Everyone!

I am trying to update the existing value of "PCR_NBR" in featurelayer by looking at the sample code of ArcGIS API for JS using apply edits, but its not working. In this code I am just trying to replace the value by 20. Also is it possible to run loop to have conditional statement, for eg: if PCR_NBR is less than 50, replace it by 20, if it is more than 50, replace it by 100?

Thanks in advance!

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
      Update Feature Attributes | Sample | ArcGIS API for JavaScript 4.18
    </title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.18/"></script>

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      #info {
        padding: 14px;
        border-radius: 5px;
      }

      #update {
        padding: 6px;
      }

      #form {
        background: #fff;
      }

      /* replaces esri-widget--panel */
      .scroller {
        overflow-x: hidden;
        overflow-y: auto;
      }

    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/FeatureForm",
        "esri/layers/FeatureLayer",
        "esri/form/FormTemplate"
      ], function(Map, MapView, FeatureForm, FeatureLayer, FormTemplate) {
        let highlight, editFeature;
        var popupMajorRoads = {
          title: "Pavement Condition Rating(PCR): " + "{PCR_NBR}",
          content: [{
            type: "fields",
            fieldInfos: [{
                fieldName: "PCR_YEAR",
                label: "PCR Year",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              },
              {
                fieldName: "PCR_NBR",
                label: "Pavement Condition (PCR)",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              },
              {
                fieldName: "NLFID",
                label: "NLFID",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              },
              {
                fieldName: "JURISDICTI",
                label: "Juristiction",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              },
              {
                fieldName: "ROUTE_TYPE",
                label: "Route Type",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              },
              {
                fieldName: "ROUTE_NBR",
                label: "Route Number",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              },
              {
                fieldName: "DIRECTION_",
                label: "Direction",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              },
              {
                fieldName: "LANES",
                label: "Number of Lanes",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              }
            ]
          }]
        };
        const featureLayer = new FeatureLayer({
          portalItem: {
            id: "8108b08e5ec643388380599f82e84b96"
          },
          outFields: ["*"],
          visible: true,
          popupTemplate: popupMajorRoads
        });

        const map = new Map({
          basemap: "topo-vector",
          layers: [featureLayer]
        });

        let view = new MapView({
          map: map,
          container: "viewDiv",
          center: [-82.9988, 39.9612],
          zoom: 10,

        });
        featureLayer.queryFeatures({
            outFields: ["*"],
            returnGeometry: true
          })
          .then(function(results) {
            if (results.features.length > 0) {
              editFeature = results.features[0];
              editFeature.attributes.PCR_NBR = 20;
            }
          });

        const edits = {
          updateFeatures: [editFeature]
        };
        featureLayer.applyEdits(edits);

      });

    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="info" class="esri-widget">
    </div>

  </body>

</html>

KenBuja · ‎01-14-2021

As for doing it in a loop, try this (untested).

editFeatures = results.features;
editFeatures.forEach(editFeature => {
  if (editFeature.attributes.PCR_NBR < 50) {
    editFeature.attributes.PCR_NBR = 20;
  } else {
    editFeature.attributes.PCR_NBR = 100;
  }
});
const edits = {
  updateFeatures: editFeatures
};
featureLayer.applyEdits(edits);

View solution in original post

BlakeTerhune · ‎01-14-2021

Starting with the simplest things, have you verified the PortalItem is hosted as a Feature Service with Update capabilities? Are you getting an error in the console?

RabinSubedi · ‎01-14-2021

@BlakeTerhuneThanks for your reply. I am not sure if I understood your question properly or not. I just uploaded a shapefile to arcgis for developers and got portalid from there. I didn't add any additional settings to it. Also, I don't want this code to make changes to the original data in server, I just want to make temporary change on workspace only.

BlakeTerhune · ‎01-14-2021

No worries. Looks like you were able to get to the root of the problem. Carry on!

KenBuja · ‎01-14-2021

You are calling applyEdits outside the queryFeatures function, meaning it's trying to apply the edits before the query is finished. Try moving it inside the "then" function

featureLayer.queryFeatures({
  outFields: ["*"],
  returnGeometry: true
})
  .then(function(results) {
    if (results.features.length > 0) {
    editFeature = results.features[0];
    editFeature.attributes.PCR_NBR = 20;
    const edits = {
      updateFeatures: [editFeature]
    };
    featureLayer.applyEdits(edits);
  }
});

KenBuja · ‎01-14-2021

As for doing it in a loop, try this (untested).

editFeatures = results.features;
editFeatures.forEach(editFeature => {
  if (editFeature.attributes.PCR_NBR < 50) {
    editFeature.attributes.PCR_NBR = 20;
  } else {
    editFeature.attributes.PCR_NBR = 100;
  }
});
const edits = {
  updateFeatures: editFeatures
};
featureLayer.applyEdits(edits);

RabinSubedi · ‎01-14-2021

Thank you very much @KenBuja, it works. One more question: once we update the attribute value, shouldn't the value in popup window update by itself? Also the value in featuretable widget (assuming we have it in this code)?