Edit feature data

Add, update, and delete data in a hosted feature layer.

Prerequisites

You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.

Steps

Create a new pen

If you are using the CDN libraries, to get started.

Make the request

Copy and paste the code below, following the steps to make a request to the feature service.

Reference the ArcGIS REST JS libraries either through CDN, ES Modules, or Node JS.
Set the apiKey with the API key from your dashboard.
Define the parameters needed for the request.
Call the feature service and handle the results.

CDN

ES Modules

Node JS

Add line.Change lineAdd line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>ArcGIS REST JS</title>
  <style>
    body {
      font-family: monospace;
      color: white;
    }
    pre {
      overflow: auto;
      padding: 1rem;
    }
    body,pre{
      background: #000000;
    }
  </style>
</head>
<body>
  <pre id="result-add"></pre>
  <hr>
  <pre id="result-update"></pre>
  <hr>
  <pre id="result-delete"></pre>

  <!-- require ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-feature-layer@3.0.0/dist/umd/feature-layer.umd.js"></script>
  <script>
    /* when including ArcGIS REST JS all exports are available
    from the same arcgisRest global */

    const apiKey = "YOUR-API-KEY";

    const authentication = new arcgisRest.ApiKey({
      key: apiKey
    });

    const featureServiceLayerUrl = "https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/my_points/FeatureServer/0";

    const featureToAdd = {
      attributes: {
        id: 101,
        name: 'editing test',
        rating: '2'
      },
      geometry: {
        x: -118.807,
        y: 34.002,
        spatialReference: {
          wkid: 4326
        }
      }
    };

    // begin by adding a new feature to the feature service layer,
    // then update its attributes,
    // and finally delete it from the layer
    arcgisRest.addFeatures({
      url: featureServiceLayerUrl,
      features: [featureToAdd],
      authentication
    })
      .then(handleAdded);

    function handleAdded(response) {
      console.log(response);
      document.getElementById("result-add").textContent = JSON.stringify(response, null, 2);

      if (!response.addResults[0].success) {
        // stop early if adding a new feature was not successful
        return;
      }

      // perform an update to feature attributes using the objectId of the newly added feature
      const featureToUpdate = {
        attributes: {
          objectId: response.addResults[0].objectId,
          name: 'new name',
          rating: '3'
        }
      };

      arcgisRest.updateFeatures({
        url: featureServiceLayerUrl,
        features: [featureToUpdate],
        authentication
      })
        .then(handleUpdated);
    }

    function handleUpdated(response) {
      console.log(response);
      document.getElementById("result-update").textContent = JSON.stringify(response, null, 2);

      if (!response.updateResults[0].success) {
        // stop early if updating the feature was not successful
        return;
      }

      // delete the feature using the objectId of the updated feature
      // NOTE: it is the same objectId provided in the response of `arcgisRest.addFeatures`
      const featureToDelete = [response.updateResults[0].objectId];

      arcgisRest.deleteFeatures({
        url: featureServiceLayerUrl,
        objectIds: [featureToDelete],
        authentication
      })
        .then(handleDeleted);
    }

    function handleDeleted(response) {
      console.log(response);
      document.getElementById("result-delete").textContent = JSON.stringify(response, null, 2);
    }

  </script>

</body>
</html>

Result

The request will return the following :

What's next?

Learn how to use additional ArcGIS location services in these tutorials:

Solution

Estimated time

10 minutes

DocumentationArcGIS REST JS Guide

Edit feature data

Solution

Estimated time

Was this page helpful?

Solution

Estimated time

Was this page helpful?

Was this page helpful?

DocumentationArcGIS REST JS Guide

Edit feature data

Prerequisites

Steps

Create a new pen

Make the request

Result

What's next?

Query a feature layer (spatial)

Query a feature layer (SQL)

Find service areas

Solution

Estimated time

Was this page helpful?

Solution

Estimated time

Was this page helpful?

Was this page helpful?