Return Results Options

[jaykapalczynski]

I have an app that has a few different queries that query the same data...it then places this data in DIV

<div id="inforesults">Results:</div>

Everything seems to be working fine I just desire more functionality.  What I would like to do is:

• Move the data into a table format that has sorting
• Allow the user to select a record and highlight the map and visa versa.

Just not sure where to go from here.  What are my options for a results container that would achieve this.  Maybe something that I can easily stylize with CSS

   // QUERY FOR County and Squad 
   var queryTask = new QueryTask("https://xxxx/arcgis/rest/services/Projects/xxxx/FeatureServer/5");
   var query = new Query();
   query.outSpatialReference = {wkid:4326}; //4326 //102100 //3857
   query.returnGeometry = true;
   query.outFields = ["*"];

    on(dom.byId("executeCountySquad"), "click", executeCountySquad);
    function executeCountySquad () {
        query.where = "County_Nam = '"+ (dom.byId("CountyName").value) +"' AND Squad = '"+ (dom.byId("Squad").value) +"' ";
     queryTask.execute(query, showResultsCountySquad);
    }
    function showResultsCountySquad (results) {
     var resultItems = [];
        var resultCount = results.features.length; 
         alert(resultCount) 
         for (var i = 0; i < resultCount; i++) {
            var featureAttributes = results.features[i].attributes;
            for (var attr in featureAttributes) {
              resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
            }
            resultItems.push("<br>");
        }
        dom.byId("inforesults").innerHTML = resultItems.join("");  
    }


//======================================================

<input id="executeCountySquad" type="button" value="Get Details County Squad">                          
<div id="inforesultsCountySquad" style="padding:5px; font-size:8px; height:Auto; margin:5px; background-color:#eee;">Results:</div>           
                    ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[jaykapalczynski]

init.js:113 TypeError: Cannot read property '0' of undefined at index.js:285 at Object.map (init.js:71) at showResultsCountySquad (index.js:277) at Object._successHandler (init.js:2030) at Object._handler (init.js:2026) at init.js:63 at Object.load (init.js:2022) at init.js:996 at c (init.js:103) at d (init.js:103) "TypeError: Cannot read property '0' of undefined at http://127.0.0.1/SummonsParameters/js/index.js:285:61 at Object.map (https://js.arcgis.com/3.20/init.js:71:177) at showResultsCountySquad (http://127.0.0.1/SummonsParameters/js/index.js:277:29) at Object._successHandler (https://js.arcgis.com/3.20/init.js:2030:478) at Object._handler (https://js.arcgis.com/3.20/init.js:2026:254) at https://js.arcgis.com/3.20/init.js:63:277 at Object.load (https://js.arcgis.com/3.20/init.js:2022:253) at https://js.arcgis.com/3.20/init.js:996:139 at c (https://js.arcgis.com/3.20/init.js:103:393) at d (https://js.arcgis.com/3.20/init.js:103:182)"

[jaykapalczynski]

If I comment out the RETURn I get the values in my DIV....leave it in there and I get nothing...but nothing either time in the GRID

[RobertScheitlin__GISP]

So it seems that you do need to loop through the results twice then:

 function showResultsCountySquad (results) {
      var resultItems = [];
      arrayUtils.map(results.features, function(feature) {
        var featureAttributes = feature.attributes;
        for (var attr in featureAttributes) {
              resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
         }
        resultItems.push("<br>");
      });

      var data = arrayUtils.map(results.features, function(feature) {
        return {
           // property names used here match those used when creating the dgrid
           "County_Nam": feature.attributes.County_Nam,
           "Case_Numbe": feature.attributes.Case_Numbe,
           "Date_Arres": feature.attributes.Date_Arres,
           "Violation_": feature.attributes.Violation_,
           "Officer_Na": feature.attributes.Officer_Na 
         };
      });
      var memStore = new Memory({ data: data });
          window.grid.set("store", memStore);
      });
 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[jaykapalczynski]

Missing  ) somewhere trying to find it....  You help is very much appreciated...I know I am very close

[RobertScheitlin__GISP]

Sorry it was line 9 (now fixed above).

[jaykapalczynski]

Had to remove a couple at the end as well....this is what I have...I get NO Errors in the Console....the DIV populates fine but NOTHING in the grid....I am perplexed...but know I am soooo close

I cant thank you enough....

HTML GRID
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:300px; padding:10px; color:black;">
     <div id="grid" style="height:300px; color:red;" ></div>
</div>


JAVASCRIPT

// create the dgrid
     window.grid = new (declare([Grid, Selection]))({
     // use Infinity so that all data is available in the grid
     bufferRows: Infinity,
     columns: {
        "County_Nam": "County_Nam",
        "Case_Numbe": "Case Number",
        "Date_Arres": "Arrest",
        "Violation_": "Violation",
        "Officer_Na": "Officers"
     }
}, "grid");


// QUERY FOR County and Squad 
var queryTask = new QueryTask("https://xxx/arcgis/rest/services/Projects/xxx/FeatureServer/5");
var query = new Query();
query.outSpatialReference = {wkid:4326}; //4326 //102100 //3857
query.returnGeometry = true;
query.outFields = ["County_Nam","Case_Numbe","Date_Arres","Violation_","Officer_Na"];

on(dom.byId("executeCountySquad"), "click", executeCountySquad);
 
function executeCountySquad () {
   query.where = "County_Nam = '"+ (dom.byId("CountyName").value) +"' AND Squad = '"+ (dom.byId("Squad").value) +"' ";
   queryTask.execute(query, showResultsCountySquad); 
}


function showResultsCountySquad (results) {
      var resultItems = [];
      arrayUtils.map(results.features, function(feature) {
        var featureAttributes = feature.attributes;
        for (var attr in featureAttributes) {
              resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
         }
        resultItems.push("<br>");
      });
     dom.byId("inforesultsCountySquad").innerHTML = resultItems.join(""); 
          
      var data = arrayUtils.map(results.features, function(feature) {
        return {
           // property names used here match those used when creating the dgrid
           "County_Nam": feature.attributes.County_Nam,
           "Case_Numbe": feature.attributes.Case_Numbe,
           "Date_Arres": feature.attributes.Date_Arres,
           "Violation_": feature.attributes.Violation_,
           "Officer_Na": feature.attributes.Officer_Na 
         };
      });
      var memStore = new Memory({ data: data });
          window.grid.set("store", memStore);
 }

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[jaykapalczynski]

I can add an ALERT right above memStore and it shows me the correct number of objects in the array.  So I know I have data.

For some reason I cannot get it to display in the grid...hmmmmm

[RobertScheitlin__GISP]

Jay,

   Your grid needs an id field, just like the sample.

[jaykapalczynski]

I added this and still nothing...I am crying and laughing at the same time...lol

THANK YOU SO VERY MUCH FOR YOUR patience and help....

UPDATED TO WHAT I ACTUALLY HAVE

// create the dgrid
window.grid = new (declare([Grid, Selection]))({
    // use Infinity so that all data is available in the grid
    bufferRows: Infinity,
    columns: {
       "id": "ID",
       "County_Nam": "County_Nam",
       "Case_Numbe": "Case Number",
       "Date_Arres": "Arrest",
       "Violation_": "Violation",
       "Officer_Na": "Officers"
  }
}, "grid");


// snip
     query.outFields = ["OBJECTID","County_Nam","Case_Numbe","Date_Arres","Violation_","Officer_Na"];
// snip


 function showResultsCountySquad (results) {
      var resultItems = [];
      arrayUtils.map(results.features, function(feature) {
        var featureAttributes = feature.attributes;
        for (var attr in featureAttributes) {
              resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
         }
        resultItems.push("<br>");
      });
     dom.byId("inforesultsCountySquad").innerHTML = resultItems.join(""); 
          
      var data = arrayUtils.map(results.features, function(feature) {
        return {
           // property names used here match those used when creating the dgrid
           "id": feature.attributes.OBJECTID,
           "County_Nam": feature.attributes.County_Nam,
           "Case_Numbe": feature.attributes.Case_Numbe,
           "Date_Arres": feature.attributes.Date_Arres,
           "Violation_": feature.attributes.Violation_,
           "Officer_Na": feature.attributes.Officer_Na 
         };
      });

      var memStore = new Memory({ data: data });
          window.grid.set("store", memStore);

 }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Is there an error in the console?