TransWikia.com

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

Geographic Information Systems Asked on November 12, 2021

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>

One Answer

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":

enter image description here

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:

enter image description here

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.

Answered by Stephen Lead on November 12, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP