Display Feature Layer Field Values without a Map

463
1
07-15-2020 03:55 PM
MonarchAdmin
New Contributor II

I am just learning JavaScript for this mini-project and would appreciate any help.

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>
0 Kudos
1 Reply
JohnGrayson
Esri Regular Contributor

You can use 'esri/request' to help you with this task:

Start with this sample that shows the basics: Request data from a remote server | ArcGIS API for JavaScript 4.16 

Then modify it to your specific needs, such as in this codepen: https://codepen.io/john-grayson/pen/oNbaGzm 

Good luck

0 Kudos