nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Simple Query Task Help Needed

PaulWilner_II

Hi All:

I really must be missing something here because I have yet to get a query task to work properly. I'm very new to both javascript and web app development and so I'm taking baby steps to build the app that my organization has requested. As a first step all I'd like to do is query my layer and return one point of 64 based upon the query. In this case based on the query, the point with the name "Albany" in the CampusName field should return the symbol specified in the query and be different than the other points.

This seems to be a simple task and I'm following the guide here:

https://developers.arcgis.com/javascript/jshelp/intro_querytask.html
and trying to apply it to my data.

Any insight would be much appreciated.

Below is my code;

<!DOCTYPE html>
<html>
<head>
<title>Create a Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
</style>

<script src="http://js.arcgis.com/3.8/"></script>
<script>
    var map;
    require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/QueryTask", "esri/tasks/query", "esri/symbols/SimpleMarkerSymbol", "esri/InfoTemplate", "dojo/_base/Color", "dojo/domReady!"],

    function(Map,ArcGISDynamicMapServiceLayer, QueryTask,Query, SimpleMarkerSymbol, InfoTemplate, Color)
    {
      map = new Map("mapDiv",
      {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"


      });
       var SunySchoolsLayer = new ArcGISDynamicMapServiceLayer("http://w7hp348/arcgis/rest/services/Testservice/FeatureServiceTest/MapServer/");
       map.addLayer(SunySchoolsLayer);

       queryTask=new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/FeatureServiceTest/MapServer/0");

       query = new Query();
       query.returnGeometry = true;
       query.outFields = ["CampusName"];

       infoTemplate = new InfoTemplate ("${CampusName}");

       symbol=new simpleMarkerSymbol();
       symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
       symbol.setSize(10);
       symbol.setColor(new Color([255,255,0,0.5]));



       function executeQueryTask()
       {
         query.where = "CampusName = 'Albany' ";
         queryTask.execute(query,showResults);
       }

       function showResults(featureSet)
       {
         for(vari=0, i1=resultFeatures.length; i<i1; i++)
         {
           var graphic=resultFeatures;
           graphic.setSymbol(symbol);
           graphic.setInfoTEmplate(infoTemplate);
           map.graphics.add(graphic);
         }
       }
    });

タグ付けされた投稿をもっと見る

Accepted answers

KaitlynnDavis

When you use console.log(), that means that you are sending a log message to the console window. So if you are testing your app in the Firefox browser, for example, you should see your log statements in Firebug's console tab, given that you've chosen the Firebug debugger. So for "console.log("My query results:", resultFeatures);" you should see in your debugger console panel the text 'My query reults:' followed by the FeatureSet object that was returned from your query task. You could further drill down and use:

console.log("My query results:", featureSet.features);   //returns an array of your query result's features console.log("My query results:", featureSet.features.length);  //returns the length of the feature array

If your debugger does not indicate that any features are getting returned, you should probably check to make sure there is nothing wrong with your feature layer or the way you're writing your query. Try the same query you are using in your code in your REST endpoint for the layer (http://w7hp348/arcgis/rest/services/Testservice/FeatureServiceTest/MapServer/0). If you're not sure how to do this, navigate to that URL and at the bottom of the page there should be a link titled Query that leads you to a page where you can construct your query and see if it still fails

All comments

PaulWilner_II

Excellent, that was helpful; I didn't really take notice of the arrows and check marks; I'll be sure to credit those who deserve it in the future!

kenbuja

Thanks to all that helped, I'm going to consider this thread closed now.

You should consider clicking the up arrow on the posts that were helpful and click the check mark on the post (even if it's yours) on what you consider to be the best answer (see this page for more detail). This will help others who may be searching on this type of question

PaulWilner_II

With a little more debugging I got this to work; I think the query was executing properly, the problem appeared to be on the display side of things.

Thanks to all that helped, I'm going to consider this thread closed now.

PaulWilner_II

Hi All:

I thought I'd try to revive this thread. I found out that the type f undefined error had something to do with the spatial reference. I've commented out the spatial reference line in the query task and this seems to solve the problem.

Now my query is returning 0 features, and is undefined, even when I changed the "query.where" statement to 1=1. Why am I returning a featureset array of 0.

Here is my current code, Any help would be much appreciated.

<!DOCTYPE html>
<html>
<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
  <style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  
  <script src="http://js.arcgis.com/3.8/"></script>
  <script>
 var map;
 require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer","esri/tasks/QueryTask","esri/tasks/query","esri/symbols/SimpleMarkerSymbol","esri/tasks/FeatureSet","dojo/domReady!"],
 function(Map,ArcGISDynamicMapServiceLayer,QueryTask,Query, SimpleMarkerSymbol,FeatureSet)
 {
map = new Map("mapDiv", 
      {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"     
      });
      
      var SunySchoolsLayer = new ArcGISDynamicMapServiceLayer("http://w7hp348/arcgis/rest/services/Testservice/XTest/MapServer");
       map.addLayer(SunySchoolsLayer);
       
       
       

       
       
       var queryTask= new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/XTest/MapServer/0");
       var query = new Query();
       
       
       
       query.where ="CampusName= 'Albany'";
       //query.outSpatialReference = map.spatialReference;
       query.returnGeometry = true;
       query.outFields = ["CampusName"];
       queryTask.execute(query,showResults);
       
       //console.log("My query results:", featureSet.features); 
       
       
       
       var symbol = new SimpleMarkerSymbol();
       symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
       symbol.setSize(50);
       
       var resultFeatures=FeatureSet.features;
       
       console.log("My query results:", FeatureSet.length);
       console.log("My query results:", FeatureSet.features);   //returns an array of your query result's features
       
       function showResults(resultFeatures)
       
       {
                         
         for(var i=0, i1=resultFeatures.features.length; i<i1; i++);
         {
           var graphic=resultFeatures;
           graphic.setSymbol(symbol);
           map.graphics.add(graphic);
                    
         }
         

       }
       
       
    });
  


  </script>
  
</head>
<body class="tundra">
  <div id="mapDiv"></div>;
</body>
</html>

PaulWilner_II

Thanks to everyone for continued help!

I've decided to rebuild the code line by line to determine where exactly it fails. It looks like the query is not executing because the code fails at the line queryTask.execute(query,showResults);

and has something to do with this error message:

TypeError: f is undefined

which I don't understand

I have not changed my code since that which lies above.

TonghuiMing_2-1756367969008.png

TonghuiMing_3-1756368019538.png

KaitlynnDavis

I'm not sure why you're not seeing the log statement unless your code is failing before it gets to that point

I think I see an issue with your for loop though. Use this instead:

for(var i=0, i1=resultFeatures.features.length; i<i1; i++);

The FeatureSet that's returned from a querytask is an object (https://developers.arcgis.com/javascript/jsapi/featureset.html), and the length property is for an array, so you want to be applying length to the array of returned features array

PaulWilner_II

When you use console.log(), that means that you are sending a log message to the console window. So if you are testing your app in the Firefox browser, for example, you should see your log statements in Firebug's console tab, given that you've chosen the Firebug debugger. So for "console.log("My query results:", resultFeatures);" you should see in your debugger console panel the text 'My query reults:' followed by the FeatureSet object that was returned from your query task. You could further drill down and use:

Ok, so now I know where to look, The odd thing here is that the debugger doesn't even show the text "My query results:" I would think no matter the state of the query itself the text would be logged. The fact that it isn't doesn't make any sense to me.

In firebug here's what it looks like under the tab console/all

.
GET http://services.arcgisonline.com/ArcGIS/rest/info?f=json

200 OK
33ms
/3.8/ (line 158)
GET http://w7hp348/arcgis/rest/info?f=json

200 OK
347ms
/3.8/ (line 158)
GET http://static.arcgis.com/attribution/World_Street_Map?f=json

200 OK
54ms
/3.8/ (line 158)
TypeError: f is undefined

The resource from this URL is not text: http://js.arcgis.com/3.8/

Any thoughts on what any of that means and why I'm not seeing the text in the console log statement?

If your debugger does not indicate that any features are getting returned, you should probably check to make sure there is nothing wrong with your feature layer or the way you're writing your query.

I have tested the query via the rest endpoint and it appears to return one point, which I would expect it to return.

KaitlynnDavis

console.log("My query results:", featureSet.features);   //returns an array of your query result's features console.log("My query results:", featureSet.features.length);  //returns the length of the feature array

PaulWilner_II

check out your debugger console to see what returned from your query

Thank you all for your continued patience with this newbie. When I'm a master coder I'll be sure to return the favor.

This is a great trick, I can open the debugger console.........but um, what exactly am I looking for? I don't see what was supposed to be logged. I don't see anything like:   "My query results......(results) " in the log or debugger or any of the other tabs. Can you direct me?

Changes made:
Updated field name to "CAMPUS_NAM" originally had it pointed at the wrong field.

Capitalized S in simplemarkersymbol.

Updated code follows:

<!DOCTYPE html>
<html>
<head>
<title>Create a Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
</style>

<script src="http://js.arcgis.com/3.8/"></script>
<script>
    var map;
    require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer","esri/tasks/QueryTask","esri/tasks/query","esri/symbols/SimpleMarkerSymbol","dojo/domReady!"],

    function(Map,ArcGISDynamicMapServiceLayer,QueryTask,Query,SimpleMarkerSymbol)
    {
      map = new Map("mapDiv",
      {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"


      });
       var SunySchoolsLayer = new ArcGISDynamicMapServiceLayer("http://w7hp348/arcgis/rest/services/Testservice/FeatureServiceTest/MapServer/");
       map.addLayer(SunySchoolsLayer);


       var queryTask= new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/FeatureServiceTest/MapServer/0");
       var query = new Query();

       query.where = "CAMPUS_NAM = 'Albany'";
       query.outSpatialReference = map.spatialReference;
       query.returnGeometry = true;
       query.outFields = ["CAMPUS_NAM"];
       queryTask.execute(query,showResults);




       var symbol = new SimpleMarkerSymbol();
       symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
       symbol.setSize(50);

      var resultFeatures=FeatureSet.features;


       function showResults(resultFeatures)

       {
        console.log("My query results:", resultFeatures);

         for(i=0, i1=resultFeatures.length; i<=i1; i++)
         {
           var graphic=resultFeatures;
           graphic.setSymbol(symbol);
           map.graphics.add(graphic);


         }

       }

    });



</script>

</head>
<body class="claro">
<div id="mapDiv"></div>
</body>
</html>

KaitlynnDavis

Make sure that when you refer to dojo modules in your code that you use the same name as the one you chose in your require callback. In your code, you use "new simpleMarkerSymbol();" but it should reflect the parameter name you originally provided, which was "SimpleMarkerSymbol". Case sensitivity matters in this regard.

Also, to ensure that your query is returning features, use a log statement in the showResults function. Just supply this

console.log("My query results:", resultFeatures);

at the beginning of the function and then check out your debugger console to see what returned from your query

PaulWilner_II

Thanks for the input. I really need to understand how queryTask works, as such I've removed the "infotemplate" portions of the code for simplicity and also took the suggestions by previous posters into account but I still don't have this working. Any further assistance by anyone would be appreciated.

Again the goal is to query a layer and change the symbol of one of the points based the query. I do realize there are probably other ways to do this task but my goal is to understand how query works with my own server and the javascriptAPI.

My current code is below

<!DOCTYPE html>
<html>
<head>
<title>Create a Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
</style>

<script src="http://js.arcgis.com/3.8/"></script>
<script>
    var map;
    require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/QueryTask", "esri/tasks/query", "esri/symbols/SimpleMarkerSymbol","dojo/_base/Color", "dojo/domReady!"],

    function(Map,ArcGISDynamicMapServiceLayer, QueryTask,Query, SimpleMarkerSymbol, Color)
    {
      map = new Map("mapDiv",
      {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"


      });
       var SunySchoolsLayer = new ArcGISDynamicMapServiceLayer("http://w7hp348/arcgis/rest/services/Testservice/FeatureServiceTest/MapServer/");
       map.addLayer(SunySchoolsLayer);

       var queryTask=new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/FeatureServiceTest/MapServer/0");
       var query = new Query();
       query.returnGeometry = true;
       query.outFields = ["CampusName"];
       query.where = "CampusName = 'Albany' ";
       queryTask.execute(query,showResults);



       var symbol=new simpleMarkerSymbol();
       symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
       symbol.setSize(10);
       symbol.setColor(new Color([255,255,0,0.5]));

      var resultFeatures=featureSet.features;


       function showResults(resultFeatures)

       {
         map.graphics.clear();


         for(i=0, i1=resultFeatures.length; i<i1; i++)
         {
           var graphic=resultFeatures;
           graphic.setSymbol(symbol);
           map.graphics.add(graphic);
         }
       }
    });



</script>

</head>
<body class="claro">
<div id="mapDiv"></div>
</body>
</html>

JohnathanBarclay

There are several further mistakes in your code:

I cant see where the variables queryTask, query, infoTemplate and symbol have been declared
In your for loop there is no space between var and i (In fact the "var" isn't really needed in a for loop)
You have given graphic.setInfoTemplate method an upper case "E" incorrectly

I recommend you use your browser's development tools which would have picked up on these for you.

ScottGunn

Just briefly loooking at this, but it looks like you call showResults in the queryTask but you do not have any reference to the featureSet object. Have you tried this:
function showResults(featureSet)
       {
var resultFeatures = featureSet.features;
for(vari=0, i1=resultFeatures.length; i<i1; i++)
         {
           var graphic=resultFeatures;
           graphic.setSymbol(symbol);
           graphic.setInfoTEmplate(infoTemplate);
           map.graphics.add(graphic);
         }
       }
    });

Hi All:

       function executeQueryTask()
       {
         query.where = "CampusName = 'Albany' ";
         queryTask.execute(query,showResults);
       }

       function showResults(featureSet)
       {
         for(vari=0, i1=resultFeatures.length; i<i1; i++)
         {
           var graphic=resultFeatures;
           graphic.setSymbol(symbol);
           graphic.setInfoTEmplate(infoTemplate);
           map.graphics.add(graphic);
         }
       }
    });

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.