Edit feature data

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

Prerequisites

This tutorial requires an ArcGIS Location Platform or ArcGIS Online account.

Steps

Create a new pen

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

Get an access token

You need an access token with the correct privileges to access the resources used in this tutorial.

  1. Go to the Create an API key tutorial and create an API key with the following privilege(s):

    • Privileges:
    • Item access
      • Note: If you are using your own custom data layer for this tutorial, you need to grant the API key credentials access to the layer item. Learn more in Item access privileges.
  2. Copy the API key access token to your clipboard when prompted.

  3. In CodePen, update the accessToken variable to use your access token.

    Use dark colors for code blocksCopy
    1
    2
    3
    4
    
    const accessToken = "YOUR_ACCESS_TOKEN";
    
    const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);

To learn about the other types of authentication available, go to Types of authentication.

Make the request

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

  1. Reference the ArcGIS REST JS libraries either through CDN, ES Modules, or Node JS.

    1. Set the accessToken with an API key access token from API key credentials.
  2. Define the parameters needed for the request.

  3. Call the feature service and handle the results.

CDNCDNES ModulesNode JS
Expand
Use dark colors for code blocks
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
    <!-- require ArcGIS REST JS libraries from https://unpkg.com -->
    <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-feature-service@4/dist/bundled/feature-service.umd.js"></script>
    <script>
      /* when including ArcGIS REST JS all exports are available
    from the same arcgisRest global */

      const accessToken = "YOUR_ACCESS_TOKEN";

      const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);

      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>
Expand

Result

Below is the response from the service:

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
[
  {
    "addResults": [
      {
        "objectId": 5948,
        "uniqueId": 5948,
        "globalId": null,
        "success": true
      }
    ]
  },
  {
    "updateResults": [
      {
        "objectId": 5948,
        "uniqueId": 5948,
        "globalId": null,
        "success": true
      }
    ]
  },
  {
    "deleteResults": [
      {
        "objectId": 5948,
        "uniqueId": 5948,
        "globalId": null,
        "success": true
      }
    ]

What's next?

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

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.