Displaying Feature Layer Field Values on webpage without Map using ArcGIS API for JavaScript

Question

I am just learning JavaScript for this mini-project.

I am looking to display the field values from a service feature layer on a web page using HTML and JS without loading a map and without any input or action from the user.

Service Feature Layer: https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0

FieldID = TRL_NAME

What I've been working with so far is below from reading through tutorials and forums, but I can't get it working:

<!DOCTYPE html>
<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
 <div class="table-responsive">
 <h1> Trails! </h1>
 <br />
 <table class="table table-bordered table-striped" id="data_str">
 <tr>
 <th>Trail Name</th>
 </tr>
 </table>
 </div>
 </div>
</body>
</html>
<script>
 $(document).ready(function() {
 $.getJSON(
 'https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0/f=getJSON',
 function(data) {
 var data_str = '';
 console.info(data.features);
 $.each(data.features, function(key, value) {
data_str += '<td>' + value.TRL_NAME + '</td>';
 data_str += '<tr>';
 });
 $('#data_str').append(data_str);
 });
 });
</script>

score 2 · Accepted Answer · answered Jul 15 '20 at 23:40

The first problem is with the query string you're sending to the server.

If you scroll down on the Feature Layer's endpoint you'll see a Query link, which is the endpoint for requesting data.

Set the where clause to 1=1 if you want to return all records, or use a SQL query such as TRL_NAME like 'M%' to find all records starting with "M":

Set the outFields parameter to * to return all fields, or use a comma-delimited list of the desired fields.

Change the Format option to json to return the results in JSON format, and you'll have the correct syntax for the query:

https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0/query?where=TRL_NAME+like+%27%25%27&outFields=*&returnGeometry=false&f=json

The second problem is that you need to look at the attributes parameter of the value object, in order to get the name of the trail:

$.each(data.features, function(key, value) {
     console.log(value.attributes.TRL_NAME)

I put together a rough demo at https://jsfiddle.net/slead/dsxf53ey/7/ to demonstrate some of these changes. Open the Console option and see that it's found Medea Creek trail:

It still doesn't add the results to your table, but you could look at https://stackoverflow.com/questions/171027/add-table-row-in-jquery for some pointers. I hope this helps get you started.

Displaying Feature Layer Field Values on webpage without Map using ArcGIS API for JavaScript

1 Answers1