Hi,
I couldn't find info on how to query a rest service to get a value and put it into text on a webpage . . . using js / html
The solution here seems straight forward
jQuery > REST > ParksFinder Bonus?
However I'm looking to grab just one item value... something like this
$(document).ready(function()
{
$.ajax ( {
type: 'GET',
url: 'https://ww3.yorkmaps.ca/arcgis/rest/services/Transportation/YR_TrafficCameras/MapServer/0/query?where=LOCATIONID%3D **JSVARIABLE** &f=json',
data: { get_param: 'value' },
dataType: 'json',
success: function (data) { $.each( data.features, function(index, element) {
$('classname').append($('<div>' + element.attributes.CAM_LOCATION + '</div>') ); } ); } } );
});
I think the success parameter configured correctly would give me something useful...?!
Any guidance would be greatly appreciated.
Cheers.
https://ww3.yorkmaps.ca/arcgis/rest/services/Transportation/YR_TrafficCameras/MapServer/0/query
Solved! Go to Solution.
Evan,
Here is that code modified to use a url parameters:
HTML:
<!DOCTYPE html> <html> <head> <title>Traffic Camera List</title> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="trafficrest.js"></script> </head> <body> <div> <p>Welcome to the Traffic Camera List.</p> </div> </body> </html>
JS:
$(document).ready(function () { var getUrlParameter = function getUrlParameter(sParam) { var sPageURL = decodeURIComponent(window.location.search.substring(1)), sURLVariables = sPageURL.split('&'), sParameterName, i; for (i = 0; i < sURLVariables.length; i++) { sParameterName = sURLVariables.split('='); if (sParameterName[0] === sParam) { return sParameterName[1] === undefined ? true : sParameterName[1]; } } }; $.ajax({ type: 'GET', url: 'https://ww3.yorkmaps.ca/arcgis/rest/services/Transportation/YR_TrafficCameras/MapServer/0/query?wher...' + getUrlParameter('location') + '&spatialRel=esriSpatialRelIntersects&outFields=*&returnGeometry=true&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&returnZ=false&returnM=false&f=json', data: { get_param: 'value' }, dataType: 'json', success: function (data) { $.each(data.features, function (index, element) { $('body').append($('<div>' + element.attributes.CAM_LOCATION + '</div>')); }); } }); });
Example:
Evan.html?location=41
You could run a query geoprocessing service, and publish this service then you can use the query in your app.
Evan,
Here is that code modified to use a url parameters:
HTML:
<!DOCTYPE html> <html> <head> <title>Traffic Camera List</title> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="trafficrest.js"></script> </head> <body> <div> <p>Welcome to the Traffic Camera List.</p> </div> </body> </html>
JS:
$(document).ready(function () { var getUrlParameter = function getUrlParameter(sParam) { var sPageURL = decodeURIComponent(window.location.search.substring(1)), sURLVariables = sPageURL.split('&'), sParameterName, i; for (i = 0; i < sURLVariables.length; i++) { sParameterName = sURLVariables.split('='); if (sParameterName[0] === sParam) { return sParameterName[1] === undefined ? true : sParameterName[1]; } } }; $.ajax({ type: 'GET', url: 'https://ww3.yorkmaps.ca/arcgis/rest/services/Transportation/YR_TrafficCameras/MapServer/0/query?wher...' + getUrlParameter('location') + '&spatialRel=esriSpatialRelIntersects&outFields=*&returnGeometry=true&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&returnZ=false&returnM=false&f=json', data: { get_param: 'value' }, dataType: 'json', success: function (data) { $.each(data.features, function (index, element) { $('body').append($('<div>' + element.attributes.CAM_LOCATION + '</div>')); }); } }); });
Example:
Evan.html?location=41
Thanks.
I added ...
success: function (data) {
$.each(data.features, function (index, element) {
$('.title').append($('<div>' + element.attributes.CAM_LOCATION + '</div>'));
$('.camid').append($('<span>' + element.attributes.LOCATIONID + '</span>'));
$('.position').append($('<span>' + element.attributes.CAM_POSITION + '</span>'));
$('.lat').append($('<span>' + element.attributes.LATITUDE + '</span>'));
$('.long').append($('<span>' + element.attributes.LONGITUDE + '</span>'));
$('#refimgid').attr('src', './loc' + element.attributes.LOCATIONID + 'R.jpg' );
});
so it outputs various attributes to various locations in my html...
Cheers.