Problem using API url in esri/request

JustinBridwell2 · ‎07-24-2018

I am trying to retrieve some json census data from an API in a script. I am using esri/request instead of the Ajax method. When I test the following in my console, it works fine:

require([  "esri/request"], function(esriRequest) {  var dataUrl=
  "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/l...";  
    var layersRequest = esriRequest({    
        url: dataUrl,    
        content: { f: "json" },    
        handleAs: "json",    
        callbackParamName: "callback"  });  
    layersRequest.then(    
        function(response) {      
            console.log("Success: ", response.layers);  
        }, function(error) {      
            console.log("Error: ", error.message);  
        });
    });

As soon as I plug in my API for dataUrl(https://api.census.gov/data/2016/acs/acs5?get=NAME,B01001_001E&for=tract:010805&in=state:01&in=count...), which is in json format already, I get a 400 (Bad Request) error thrown. What's the problem here?

RobertScheitlin__GISP · ‎07-24-2018

Justin,

Here is a working sample using that url:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Request Test</title>
  <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.25/dijit/themes/claro/claro.css">
  <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.25/esri/css/esri.css">
  <style>
    html,
    body,
    #mainWindow {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }
    #header {
      height: 3%;
      overflow: auto;
    }
  </style>
  <script>
    var dojoConfig = {
      parseOnLoad: true
    };
  </script>
  <script src="http://js.arcgis.com/3.25/"></script>
  <script>
    var map;
    require([
      "esri/config",
      "esri/map",
      "dojo/_base/lang",
      "esri/request",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      esriConfig, Map, lang, esriRequest
    ) {
      esriConfig.defaults.io.corsEnabledServers.push('https://api.census.gov') ;
      map = new Map("map", {
        basemap: "topo",
        center: [-120.1883, 37.0868],
        zoom: 6
      });

      esriRequest({
          url:"https://api.census.gov/data/2016/acs/acs5",
          content:{
            get: 'NAME,B01001_001E',
            for: 'tract:010805',
            in: ['state:01','county:073']
          },
          handleAs:'json',
          timeout:15000
        }).then(lang.hitch(this,function(resp){
          console.info(resp);
        }),lang.hitch(this,function(error){
          alert("Data failed");
        }));
    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="padding:0px;margin:0px;">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:100%;height:100%;border:none;padding:0px;margin:0px;"></div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎07-24-2018

Justin,

Here is a working sample using that url:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Request Test</title>
  <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.25/dijit/themes/claro/claro.css">
  <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.25/esri/css/esri.css">
  <style>
    html,
    body,
    #mainWindow {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }
    #header {
      height: 3%;
      overflow: auto;
    }
  </style>
  <script>
    var dojoConfig = {
      parseOnLoad: true
    };
  </script>
  <script src="http://js.arcgis.com/3.25/"></script>
  <script>
    var map;
    require([
      "esri/config",
      "esri/map",
      "dojo/_base/lang",
      "esri/request",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      esriConfig, Map, lang, esriRequest
    ) {
      esriConfig.defaults.io.corsEnabledServers.push('https://api.census.gov') ;
      map = new Map("map", {
        basemap: "topo",
        center: [-120.1883, 37.0868],
        zoom: 6
      });

      esriRequest({
          url:"https://api.census.gov/data/2016/acs/acs5",
          content:{
            get: 'NAME,B01001_001E',
            for: 'tract:010805',
            in: ['state:01','county:073']
          },
          handleAs:'json',
          timeout:15000
        }).then(lang.hitch(this,function(resp){
          console.info(resp);
        }),lang.hitch(this,function(error){
          alert("Data failed");
        }));
    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="padding:0px;margin:0px;">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:100%;height:100%;border:none;padding:0px;margin:0px;"></div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JustinBridwell2 · ‎07-24-2018

The above answer works, but I am not sure what the issue was in my original code. It appears that I was using too much info in my original call url and not utilizing the correct content configuration. I thought it may have been a cors issue, but I removed the

esriConfig.defaults.io.corsEnabledServers.push('https://api.census.gov') ;

part of the code and it still worked fine (ie ...it console.logged the correct info. ). I am uncertain how the `lang.hitch` method works. I may have a follow up question as I attempt to pull data for multiple NAMEs, states, counties, and tracts using the eSearch widget.