How to make ESRI Rest call from javascript

roshnibasu · ‎02-22-2017

How do I call the REST API https://www.arcgis.com/sharing/generateToken?username=<>&password=<>&referer=https://geoenrich.arcgis.com&f=json from a javascript method? I tried using jquery ajax request and found it working sometime and sometime the request is always pending.

And for the the following url, I do not find any specific query that I need to use? In Arc GIS 3.19 version I saw esri.tasks.locationproviders.StandardGeographyQueryLocationProvider but in 4 it is not there. If I make normal ajax call using jquery it does not work at all.

Please help me to resolve the problem.

FC_Basson · ‎02-22-2017

Have a look at esri.request:

3.19: esri/request | API Reference | ArcGIS API for JavaScript 3.19

4.2: request | API Reference | ArcGIS API for JavaScript 4.2

roshnibasu · ‎02-22-2017

We are using 4.2 version. I am clueless which class do I need to use to call any of the REST APIS including GeoEnrich.

I tried using esri\request. But it did not work . I have to use jsonp.

FC_Basson · ‎02-22-2017

Is it possible to provide some code to show what you are trying to do and where the problem is?

roshnibasu · ‎02-22-2017

$.ajax({
url: "http://geoenrich.arcgis.com/arcgis/rest/services/World/geoenrichmentserver/StandardGeographyQuery/ex..."+token+"&returnGeometry=true",
dataType: 'jsonp',
type: 'GET',
crossDomain: true,
contentType: "application/json; charset=utf-8;",
async: false,
// jsonpCallback:"callback",
success: function(result){
if(result.error){
return false;
}else{
return true;
}
},
error: function(result){
console.log(result);
alert('error');
}

});

Tried thsi with jquery it did not work for me.

roshnibasu · ‎02-22-2017

Also tried using ARC GIS 4.2 and Query API from there.

function(token){
require(["esri/request"], function(esriRequest) {
var url = "http://geoenrich.arcgis.com/arcgis/rest/services/World/geoenrichmentserver/StandardGeographyQuery/ex..."+token+"&returnGeometry=true";
esriRequest(url, {
responseType: "json",
callbackParamName: "callback",
}).then(function(response){
// The requested data
alert(response);
});

});
}

This also did not work for me.

RobertScheitlin__GISP · ‎02-22-2017

Roshni,

Here is a simple sample that works:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Find Task - 4.2</title>
  <style>
    td {
      padding: 4px;
    }

    #loading {
      visibility: hidden;
    }
  </style>

  <script src="http://js.arcgis.com/4.2/"></script>

  <script>
    require([
      "esri/request",
      "esri/config",
      "dojo/json",
      "dojo/dom",
      "dojo/on",
      "dojo/domReady!"
    ], function(esriRequest, esriConfig, JSON, dom, on) {

      esriConfig.request.proxyUrl = "http://gislap183/js/proxy/proxy.ashx";

      function doRequest(){
        var url = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/la...";
        esriRequest(url, {
          responseType: "json",
          callbackParamName: "callback"
        }).then(function(response){
          showResults(response);
        });
      }

      var resultsTable = dom.byId("tbl");

      // Executes when the promise from find.execute() resolves
      function showResults(response) {
        var results = response.data;
        // Clear the cells and rows of the table to make room for new results
        resultsTable.innerHTML =  JSON.stringify(results);
      }

      // Executes each time the promise from find.execute() is rejected.
      function rejectedPromise(err) {
        console.error("Promise didn't resolve: ", err.message);
      }

      // Run doRequest() when button is clicked
      on(dom.byId("execBtn"), "click", doRequest);
    });
  </script>

</head>
<body>
  <input type="button" value="Execute" id="execBtn" />
  <br>
  <br>
  <table id="tbl"></table>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

FC_Basson · ‎02-22-2017

I prefer the idea of doing secure service authentication through a proxy as in your example Robert.

roshni.mridha‌ does the url for the request return a result correctly?

roshnibasu · ‎02-22-2017

Yes It does..

roshnibasu · ‎02-22-2017

Hi Robert,

Thanks so much for the help. I exactly copy pasted your code and I changed the url to 'https://www.arcgis.com/sharing/generateToken?username='+uname+'&password='+pw+'&referer=*&f=json'

And that worked fine.

After that I tried modifying the example to the following:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Find Task - 4.2</title>
<style>
td {
padding: 4px;
}

#loading {
visibility: hidden;
}
</style>

//esriConfig.request.proxyUrl = "http://gislap183/js/proxy/proxy.ashx";
var url = 'https://www.arcgis.com/sharing/generateToken?username='+uname+'&password='+pw+'&referer=*&f=json';
esriRequest(url, {
responseType: "json",
callbackParamName: "callback"
}).then(function(response){
//showResults(response);
console.log(resp);
resp = response.data;
});

});
return resp;
}
var myResp = myTestFunction('myuname','mypass');
console.log(myResp);
</script>

</head>
<body>
<input type="button" value="Execute" id="execBtn" />
<br>
<br>
<table id="tbl"></table>
</body>
</html>

And I do not see the response in the log. Am I missing something here?