get rest service value to html text

1832
3
Jump to solution
01-29-2016 01:23 PM
EvanSepa
New Contributor II

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

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

0 Kudos
3 Replies
ChadKopplin
Occasional Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos
EvanSepa
New Contributor II

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.

0 Kudos