I'm trying to figure out the best way to query a table in my js application and make a list of attributes for use elsewhere in my application (for example in the attached code, I'm trying to query the table for all records in California so I can then make a list of all the counties in that state). I thought the selectedRows property would give me exactly what I needed, and while my selection is coming up with the proper number of records, the selectedRows object array is empty. Can anyone tell me what I'm doing wrong? Or if I should take another approach all together?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<script src="https://js.arcgis.com/3.20/"></script>
<style>
html,
body,
#myTableNode {
width:100%;
height:100%;
margin:0;
padding:0;
}
</style>
<script>
var map;
require([
"esri/layers/FeatureLayer",
"esri/tasks/query",
"esri/dijit/FeatureTable",
"dojo/dom",
"dojo/parser",
"dojo/ready",
], function (
FeatureLayer, Query, FeatureTable,
dom, parser, ready
) {
parser.parse();
ready(function(){
// Creates a feature layer
var myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Census_Counties_20m/FeatureServer/...", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["FID", "STATE", "COUNTY", "NAME"],
visible: true,
id: "fLayer"
});
// Creates a feature table from the feature layer
myTable = new FeatureTable({
featureLayer : myFeatureLayer,
showGridMenu: true
}, "myTableNode");
myTable.startup();
// Creates a selection on the feature table
var query = new Query();
query.where = "STATE = '06'";
myFeatureLayer.queryIds(query, function(objectIds){
console.log(objectIds);
myTable.selectRows(objectIds);
myTable.filterSelectedRecords();
var myRows = myTable.selectedRows;
if (myRows) {
console.log(myRows.length);
}
});
});
});
</script>
</head>
<body class="claro esri">
<div id="myTableNode"></div>
</body>
</html>
Solved! Go to Solution.
Try This.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<script src="https://js.arcgis.com/3.20/"></script>
<style>
html,
body,
#myTableNode {
width:100%;
height:100%;
margin:0;
padding:0;
}
</style>
<script>
var map;
require([
"esri/layers/FeatureLayer",
"esri/tasks/query",
"esri/dijit/FeatureTable",
"dojo/dom",
"dojo/parser",
"dojo/ready",
], function (
FeatureLayer, Query, FeatureTable,
dom, parser, ready
) {
parser.parse();
ready(function(){
// Creates a feature layer
var myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Census_Counties_20m/FeatureServer/...", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["FID", "STATE", "COUNTY", "NAME"],
visible: true,
id: "fLayer"
});
// Creates a feature table from the feature layer
myTable = new FeatureTable({
featureLayer : myFeatureLayer,
showGridMenu: true
}, "myTableNode");
myTable.startup();
myTable.on("load", function(){
// Creates a selection on the feature table
var query = new Query();
query.where = "STATE = '06'";
myFeatureLayer.queryIds(query, function(objectIds){
console.log(objectIds);
myTable.selectRows(objectIds);
});
myTable.on("refresh", function(){
myTable.getFeatureDataById(myTable.selectedRowIds).then(function(features){
console.log("features", features.features);
});
});
});
});
});
</script>
</head>
<body class="claro esri">
<div id="myTableNode"></div>
</body>
</html>
Shannon,
See my comments in this code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<script src="https://js.arcgis.com/3.20/"></script>
<style>
html,
body,
#myTableNode {
width:100%;
height:100%;
margin:0;
padding:0;
}
</style>
<script>
var map;
require([
"esri/layers/FeatureLayer",
"esri/tasks/query",
"esri/dijit/FeatureTable",
"dojo/dom",
"dojo/parser",
"dojo/ready",
"dojo/on"
], function (
FeatureLayer, Query, FeatureTable,
dom, parser, ready, on
) {
parser.parse();
ready(function(){
// Creates a feature layer
var myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Census_Counties_20m/FeatureServer/...", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["FID", "STATE", "COUNTY", "NAME"],
visible: true,
id: "fLayer"
});
// Creates a feature table from the feature layer
myTable = new FeatureTable({
featureLayer : myFeatureLayer,
showGridMenu: true
}, "myTableNode");
myTable.startup();
//If you want to get the count of the filtered records you listen for the filter event
on(myTable, "filter", function(evt){
console.info(evt.ids.length);
});
//This event will only fire when the user selects row(s) manualy
//then you can get myTable.selectedRows
on(myTable, "row-select", function(evt){
console.info(myTable.selectedRows);
});
// Creates a selection on the feature table
var query = new Query();
query.where = "STATE = '06'";
query.returnGeometry = false;
myFeatureLayer.queryIds(query, function(objectIds){
console.log(objectIds);
myTable.selectRows(objectIds);
myTable.filterSelectedRecords();
});
});
});
</script>
</head>
<body class="claro esri">
<div id="myTableNode"></div>
</body>
</html>
Try This.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<script src="https://js.arcgis.com/3.20/"></script>
<style>
html,
body,
#myTableNode {
width:100%;
height:100%;
margin:0;
padding:0;
}
</style>
<script>
var map;
require([
"esri/layers/FeatureLayer",
"esri/tasks/query",
"esri/dijit/FeatureTable",
"dojo/dom",
"dojo/parser",
"dojo/ready",
], function (
FeatureLayer, Query, FeatureTable,
dom, parser, ready
) {
parser.parse();
ready(function(){
// Creates a feature layer
var myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Census_Counties_20m/FeatureServer/...", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["FID", "STATE", "COUNTY", "NAME"],
visible: true,
id: "fLayer"
});
// Creates a feature table from the feature layer
myTable = new FeatureTable({
featureLayer : myFeatureLayer,
showGridMenu: true
}, "myTableNode");
myTable.startup();
myTable.on("load", function(){
// Creates a selection on the feature table
var query = new Query();
query.where = "STATE = '06'";
myFeatureLayer.queryIds(query, function(objectIds){
console.log(objectIds);
myTable.selectRows(objectIds);
});
myTable.on("refresh", function(){
myTable.getFeatureDataById(myTable.selectedRowIds).then(function(features){
console.log("features", features.features);
});
});
});
});
});
</script>
</head>
<body class="claro esri">
<div id="myTableNode"></div>
</body>
</html>
Thank you both! Both Robert Scheitlin, GISP and eroaesri-co-esridist solutions worked for me though I think Edwin's solution will best fit my needs in this case. Thank you for taking the time to help a beginner.