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":
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:
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.
Answered by Stephen Lead on November 12, 2021
Add your own answers!
Ask a Question
Get help from others!
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?
Recent Answers
- Peter Machado on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?
- Joshua Engel on Why fry rice before boiling?
- Jon Church on Why fry rice before boiling?
- haakon.io on Why fry rice before boiling?