nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

get rest service value to html text

EvanSepa

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

Vind meer berichten getagd met

Accepted answers

RobertScheitlin__GISP

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?where=LOCATIONID%3D' + 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

All comments

EvanSepa

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.

RobertScheitlin__GISP

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?where=LOCATIONID%3D' + 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

ChadKopplin

You could run a query geoprocessing service, and publish this service then you can use the query in your app.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.