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?
Solved! Go to Solution.
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>
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>
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.