Getting "cannot read property id of 'null' error when creating a Query()

5775
3
Jump to solution
10-28-2015 02:47 PM
KenPierce
New Contributor III

I'm trying to work through a simple tutorial and whenever I get to the "var query = new Query();" line I get an error in chrome in init.js and cannot read id of null. Supposedly the error is on line 143 of init.js in b.get. I get the same error running locally with simpleHTTPServer or from cloud9.

**Code below in its entirety

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

</head>

<body>

<select id="population" name="population">

      <option value="" selected="selected">Select a population</option>

      <option value="2500">2,500</option>

      <option value="5000">5,000</option>

      <option value="7500">7,500</option>

    </select>

  <div id="map">

  </div>

</body>

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

<script>

  require([

  'dojo/dom',

  'dojo/on',

  'dojo/_base/array',

  'dojo/_base/Color',

  'esri/map',

  'esri/tasks/query',

  'esri/tasks/QueryTask',

  'esri/symbols/SimpleMarkerSymbol',

  'esri/symbols/SimpleLineSymbol',

  'esri/graphic'], function(dom, on, array, Query, QueryTask, Map, Color, SimpleMarkerSymbol, SimpleLineSymbol, Graphic){

  var map = new Map('map', {

  basemap: 'streets',

  center: [-118.2095, 34.0866],

  zoom: 10

  });

  var url = 'http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/la_county_labor_centroid/FeatureSer...

     var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, null, new Color([50,50,255]));

  function onQuerySuccess(featureSet) {

     map.graphics.clear();

     array.forEach(featureSet.features, function(feature){

        feature.setSymbol(markerSymbol);

        map.graphics.add(feature);

     });

  }

  function onError(error){

     console.error('An eerror occurred in the query: ', error);

  }

  on(dom.byId('population'), 'change', function(e) {

    var population = e.target.value;

    if (population.length > 0) {

      var queryTask = new QueryTask(url);

      var query = new Query();

      query.where = 'TOTAL_POP > ' + population;

      query.returnGeometry = true;

      queryTask.execute(query).then(onQuerySuccess, onError);

    }

  });

  });

</script>

</html>

0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

It looks like your argument aliases are not in the same order ad the modules. In your code you load esri/tasks/query as the  6th module in the list but the associated alias is 4th. So when you use Query in your code you are really referring to Color which is the 4th module. If you rearrange your modules so they match the order of the argument name your code should work.

  require([

  'dojo/dom',

  'dojo/on',

  'dojo/_base/array',

  'dojo/_base/Color',

  'esri/map',

  'esri/tasks/query',

  'esri/tasks/QueryTask',

  'esri/symbols/SimpleMarkerSymbol',

  'esri/symbols/SimpleLineSymbol',

  'esri/graphic'], function(dom, on, array, Query, QueryTask, Map, Color, SimpleMarkerSymbol, SimpleLineSymbol, Graphic){

View solution in original post

3 Replies
RickeyFight
MVP Regular Contributor

Ken,

What tutorial are you trying?  What are you trying to accomplish with this webapp?

0 Kudos
KellyHutchins
Esri Frequent Contributor

It looks like your argument aliases are not in the same order ad the modules. In your code you load esri/tasks/query as the  6th module in the list but the associated alias is 4th. So when you use Query in your code you are really referring to Color which is the 4th module. If you rearrange your modules so they match the order of the argument name your code should work.

  require([

  'dojo/dom',

  'dojo/on',

  'dojo/_base/array',

  'dojo/_base/Color',

  'esri/map',

  'esri/tasks/query',

  'esri/tasks/QueryTask',

  'esri/symbols/SimpleMarkerSymbol',

  'esri/symbols/SimpleLineSymbol',

  'esri/graphic'], function(dom, on, array, Query, QueryTask, Map, Color, SimpleMarkerSymbol, SimpleLineSymbol, Graphic){

KenPierce
New Contributor III

Wow. I had no idea the order mattered in an an anonymous function call. I guess it makes sense. I'm thinking in terms of imports and arbitrary objects passed as parameters. Not sure how I hadn't come across that before. Thanks!!! Oh, the anonymous function is part of the require function call. I've been doing Node and angular lately. Can't let similar function names make me complacent. The tutorial is the Manning book ArcGIS Web Development. The mistake was mine not the books.

0 Kudos