Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Query State Info without Map</title>
​
    <script src="http://js.arcgis.com/3.13/"></script>
  </head>
​
  <body>
    US state name :
    <input type="text" id="stateName" value="California">
    <input id="execute" type="button" value="Get Details">
    <br />
    <br />
    <div id="info" style="padding:5px; margin:5px; background-color:#eee;">
    </div>
  </body>
</html>
​
 
      require([
        "dojo/dom", "dojo/on",
        "esri/tasks/query", "esri/tasks/QueryTask", "dojo/domReady!"
      ], function (dom, on, Query, QueryTask) {
​
        var queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");
​
        var query = new Query();
        query.returnGeometry = false;
        query.outFields = [
          "SQMI", "STATE_NAME", "STATE_FIPS", "SUB_REGION", "STATE_ABBR",
          "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI", "HOUSEHOLDS",
          "MALES", "FEMALES", "WHITE", "BLACK", "AMERI_ES", "ASIAN", "OTHER",
          "HISPANIC", "AGE_UNDER5", "AGE_5_17", "AGE_18_21", "AGE_22_29",
          "AGE_30_39", "AGE_40_49", "AGE_50_64", "AGE_65_UP"
        ];
​
        on(dom.byId("execute"), "click", execute);
​
        function execute () {
          query.text = dom.byId("stateName").value;
          queryTask.execute(query).then(function(results) {
            // get the attributes
            return results.features.map(function(x) {
              return x.attributes;
            }).shift(); // since we know there is only one result, return first attribute
          }).then(function(attributes) {
            // Create the DOM strings
            return Object.keys(attributes).map(function(key) {
              return "<b>" + key + ":</b>  " + attributes[key] + "<br>";
            });
          }).then(function(x) {
            // Join the DOM strings
            return x.join("");
          }).then(function(elements) {
            // update the DOM
            dom.byId("info").innerHTML = elements;
          }).otherwise(function() {
            alert("Something went completely wrong");
          });
        }
      });
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
odoepro
0viewers