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.
<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="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><preid="result-add"></pre><hr><preid="result-update"></pre><hr><preid="result-delete"></pre><!-- require ArcGIS REST JS libraries from https://unpkg.com --><scriptsrc="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script><scriptsrc="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script><scriptsrc="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);
functionhandleAdded(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 successfulreturn;
}
// perform an update to feature attributes using the objectId of the newly added featureconst featureToUpdate = {
attributes: {
objectId: response.addResults[0].objectId,
name: 'new name',
rating: '3' }
};
arcgisRest.updateFeatures({
url: featureServiceLayerUrl,
features: [featureToUpdate],
authentication
})
.then(handleUpdated);
}
functionhandleUpdated(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 successfulreturn;
}
// 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);
}
functionhandleDeleted(response) {
console.log(response);
document.getElementById("result-delete").textContent = JSON.stringify(response, null, 2);
}
</script></body></html>