JSAPI: Query Related Table

ToddFagin · ‎12-10-2015

All,

As I continue to get my feet wet with the ArcGIS API for JavaScript, I am quickly discovering the limitations to my understanding. My latest stumbling block is working on a related table query. I recently discovered John Gravois esri-leaflet-related example that does what I want. I was even able to get it to successful work with my data (hurray to the newbie). However, I wish to integrate this into a larger application, so I believe I should be using the full JSAPI, not leaflet. Here is where I stumbled (hard). I found another great example, but unlike my early luck, I could not get it to work with my data. I am fairly certain I am just making beginner errors here (or maybe I am way off). So, below is my feeble and futile attempt to take jgavois' example and modify it. All I know is when I run it in Firebug, I get the following error: TypeError: features is undefined relatedOVPDQuery.objectIDS = [features[0].attributes.objectid]; I have looked at other examples, have dipped my hand at trying to understand global and local variables, etc., but i am still lost.

Note, the FeatureLayer I am using is running on a development server not accessible, but hopefully someone much more experienced than I can still help me understand what I am doing wrong.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Todd is being very skewey</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.2.4/bootstrap-table.min.css">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <!-- cool bootstrap plugin for working with tables
    //http://wenzhixin.net.cn/p/bootstrap-table/docs/index.html
  -->
  <script src="http://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script>
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
  <style>
    html, body {
      height:  100%;
      width:   100%;
      margin:  0;
      padding: 0;
    }
    #map {
      width:   100%;
      height:  100%;
      margin:  0;
      padding: 0;
    }
    .claro .dijitTooltipContainer {
      background-image: none;
      border:           1px solid #444444;
      background-color: #444444;
      color:            #FFFFFF;
    }
    .claro .dijitTooltipConnector {
      background-image: none;
    }
        #info-pane {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 1000;
      padding: 1em;
      background: white;
    }
    .fixed-table-container {
      position: absolute;
      bottom: 10px;
      left: 10px;
      z-index: 1000;
      padding: 1em;
      background: white;
    }
    .fixed-table-body {
      max-height: 400px;
      max-width: 600px;
    }
    #hidden {
      display:none;
    }
  </style>
  <script src="https://js.arcgis.com/3.15/"></script>
  <script>
     require([
      "dojo/dom-construct",
      "dojo/parser",
      "esri/Color",
      "esri/config",
      "esri/dijit/Popup",
      "esri/dijit/PopupTemplate",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/map",
      "esri/tasks/query",
      "esri/tasks/QueryTask",
      "esri/tasks/RelationshipQuery",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/tasks/GeometryService",
      "dojo/on",
      "dojo/domReady!"
      ], function(
          domConstruct,
          parser,
          Color,
          esriConfig,
          Popup,
          PopupTemplate,
          ArcGISTiledMapServiceLayer,
          FeatureLayer,
          Map,
          Query,
          QueryTask,
          RelationshipQuery,
          SimpleFillSymbol,
          SimpleLineSymbol,
          GeometryService,
          on
        ) {          
            parser.parse();
              currentBasemap = []
             
              map = new Map("map", {
            center: [-98.435731, 35.222876],
            zoom: 7,
            slider: false,
            logo: false
          });
         
          relief = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer")
          currentBasemap.push(relief);
                  
          var okco = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Todds_Samples/m_ovpd/MapServer/0", {
            mode: FeatureLayer.MODE_ONDEMAND,
          });           
          map.addLayers([relief,okco]);   
          okco.on("click", queryRelated);
         
          //Here's the code with which I am having issue
         
          function queryRelated(evt) {
              var features = evt.features;
            var relatedOVPDQuery = new esri.tasks.RelationshipQuery();
            relatedOVPDQuery.outFields = ["*"];
            relatedOVPDQuery.relationshipId = 0;
            relatedOVPDQuery.objectIds = [features[0].attributes.objectid];
            relatedOVPDQuery.run(function(error, response, raw) {
              //pull the attributes out of the geoJson response
              if (response.features.length > 0) {
                var results = [];
                for (i=0; i < response.features.length; i++){
                  results.push(response.features.properties);
                }
                $('#my-table').removeClass('hidden');
                //you can only call refresh() when loading from a url
                $('#my-table').bootstrapTable('destroy');
                $('#my-table').bootstrapTable({
                  data: results,
                  cache: false,
                  striped: true,
                  clickToSelect: true,
                  columns: [{
                      field: 'family',
                      title: 'Family',
                      sortable: true,
                      order: 'asc'
                  }, {
                      field: 'sname',
                      title: 'Species',
                      sortable: true,
                  }, {
                      field: 'commonname',
                      title: 'Common Name',
                      sortable: true
                  }, {
                      field: 'count_',
                      title: 'Record Count',
                      sortable: true
                  }]
                });
              }
            });
          }                       
        }
      );    
  </script>
</head>
<body class="claro">
    <div id='my-table' class="hidden">
    </div>
    <div id="map"></div>
    <div id="info-pane">
          <label>Click on a county to view <br>OVPD record counts!</label>
    </div>
</body>
</html>

As always, thanks to those in this great community.

Cheers,

Todd

RobertScheitlin__GISP · ‎12-10-2015

Todd,

Here is the code corrected:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Todd is being very skewey</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.2.4/bootstrap-table.min.css">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <!-- cool bootstrap plugin for working with tables
    //http://wenzhixin.net.cn/p/bootstrap-table/docs/index.html
  -->
  <script src="http://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script>
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .claro .dijitTooltipContainer {
      background-image: none;
      border: 1px solid #444444;
      background-color: #444444;
      color: #FFFFFF;
    }

    .claro .dijitTooltipConnector {
      background-image: none;
    }

    #info-pane {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 1000;
      padding: 1em;
      background: white;
    }

    .fixed-table-container {
      position: absolute;
      bottom: 10px;
      left: 10px;
      z-index: 1000;
      padding: 1em;
      background: white;
    }

    .fixed-table-body {
      max-height: 400px;
      max-width: 600px;
    }

    #hidden {
      display: none;
    }
  </style>
  <script src="http://js.arcgis.com/3.15/"></script>
  <script>
    require([
      "dojo/dom-construct",
      "dojo/parser",
      "esri/Color",
      "esri/config",
      "esri/dijit/Popup",
      "esri/dijit/PopupTemplate",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/map",
      "esri/tasks/query",
      "esri/tasks/QueryTask",
      "esri/tasks/RelationshipQuery",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/tasks/GeometryService",
      "dojo/on",
      "dojo/domReady!"
      ], function (
      domConstruct,
      parser,
      Color,
      esriConfig,
      Popup,
      PopupTemplate,
      ArcGISTiledMapServiceLayer,
      FeatureLayer,
      Map,
      Query,
      QueryTask,
      RelationshipQuery,
      SimpleFillSymbol,
      SimpleLineSymbol,
      GeometryService,
      on
    ) {
      parser.parse();
      currentBasemap = []

      map = new Map("map", {
        center: [-98.435731, 35.222876],
        zoom: 7,
        slider: false,
        logo: false
      });

      relief = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer")  
      currentBasemap.push(relief);  

      var okco = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Todds_Samples/m_ovpd/MapServer/0", {  
        mode: FeatureLayer.MODE_ONDEMAND,  
      });
      map.addLayers([relief, okco]);
      okco.on("click", queryRelated);

      //Here's the code with which I am having issue

      function queryRelated(evt) {
        var content
        var feature = evt.graphic;
        var relatedOVPDQuery = new RelationshipQuery();
        relatedOVPDQuery.outFields = ["*"];
        relatedOVPDQuery.relationshipId = 0;
        relatedOVPDQuery.objectIds = [feature.attributes[okco.objectIdField]];
        okco.queryRelatedFeatures(relatedOVPDQuery, function (relatedRecords) {
          var fset = relatedRecords[feature.attributes[okco.objectIdField]];
          if (fset.features.length > 0) {
            var results = [];
            for (i = 0; i < fset.features.length; i++) {
              results.push(fset.features.attributes);
            }
            $('#my-table').removeClass('hidden');
            //you can only call refresh() when loading from a url
            $('#my-table').bootstrapTable('destroy');
            $('#my-table').bootstrapTable({
              data: results,
              cache: false,
              striped: true,
              clickToSelect: true,
              columns: [{  
                  field: 'family',  
                  title: 'Family',  
                  sortable: true,  
                  order: 'asc'  
              }, {  
                  field: 'sname',  
                  title: 'Species',  
                  sortable: true,  
              }, {  
                  field: 'commonname',  
                  title: 'Common Name',  
                  sortable: true  
              }, {  
                  field: 'count_',  
                  title: 'Record Count',  
                  sortable: true  
              }]
            });
          }
        });
      }
    });
  </script>
</head>

<body class="claro">
  <div id="my-table" class="hidden">
  </div>
  <div id="map"></div>
  <div id="info-pane">
    <label>Click on a county to view
      <br>OVPD record counts!</label>
  </div>
</body>

</html>

View solution in original post

RobertScheitlin__GISP · ‎12-10-2015

Todd,

Here is the code corrected:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Todd is being very skewey</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.2.4/bootstrap-table.min.css">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <!-- cool bootstrap plugin for working with tables
    //http://wenzhixin.net.cn/p/bootstrap-table/docs/index.html
  -->
  <script src="http://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script>
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .claro .dijitTooltipContainer {
      background-image: none;
      border: 1px solid #444444;
      background-color: #444444;
      color: #FFFFFF;
    }

    .claro .dijitTooltipConnector {
      background-image: none;
    }

    #info-pane {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 1000;
      padding: 1em;
      background: white;
    }

    .fixed-table-container {
      position: absolute;
      bottom: 10px;
      left: 10px;
      z-index: 1000;
      padding: 1em;
      background: white;
    }

    .fixed-table-body {
      max-height: 400px;
      max-width: 600px;
    }

    #hidden {
      display: none;
    }
  </style>
  <script src="http://js.arcgis.com/3.15/"></script>
  <script>
    require([
      "dojo/dom-construct",
      "dojo/parser",
      "esri/Color",
      "esri/config",
      "esri/dijit/Popup",
      "esri/dijit/PopupTemplate",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/map",
      "esri/tasks/query",
      "esri/tasks/QueryTask",
      "esri/tasks/RelationshipQuery",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/tasks/GeometryService",
      "dojo/on",
      "dojo/domReady!"
      ], function (
      domConstruct,
      parser,
      Color,
      esriConfig,
      Popup,
      PopupTemplate,
      ArcGISTiledMapServiceLayer,
      FeatureLayer,
      Map,
      Query,
      QueryTask,
      RelationshipQuery,
      SimpleFillSymbol,
      SimpleLineSymbol,
      GeometryService,
      on
    ) {
      parser.parse();
      currentBasemap = []

      map = new Map("map", {
        center: [-98.435731, 35.222876],
        zoom: 7,
        slider: false,
        logo: false
      });

      relief = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer")  
      currentBasemap.push(relief);  

      var okco = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Todds_Samples/m_ovpd/MapServer/0", {  
        mode: FeatureLayer.MODE_ONDEMAND,  
      });
      map.addLayers([relief, okco]);
      okco.on("click", queryRelated);

      //Here's the code with which I am having issue

      function queryRelated(evt) {
        var content
        var feature = evt.graphic;
        var relatedOVPDQuery = new RelationshipQuery();
        relatedOVPDQuery.outFields = ["*"];
        relatedOVPDQuery.relationshipId = 0;
        relatedOVPDQuery.objectIds = [feature.attributes[okco.objectIdField]];
        okco.queryRelatedFeatures(relatedOVPDQuery, function (relatedRecords) {
          var fset = relatedRecords[feature.attributes[okco.objectIdField]];
          if (fset.features.length > 0) {
            var results = [];
            for (i = 0; i < fset.features.length; i++) {
              results.push(fset.features.attributes);
            }
            $('#my-table').removeClass('hidden');
            //you can only call refresh() when loading from a url
            $('#my-table').bootstrapTable('destroy');
            $('#my-table').bootstrapTable({
              data: results,
              cache: false,
              striped: true,
              clickToSelect: true,
              columns: [{  
                  field: 'family',  
                  title: 'Family',  
                  sortable: true,  
                  order: 'asc'  
              }, {  
                  field: 'sname',  
                  title: 'Species',  
                  sortable: true,  
              }, {  
                  field: 'commonname',  
                  title: 'Common Name',  
                  sortable: true  
              }, {  
                  field: 'count_',  
                  title: 'Record Count',  
                  sortable: true  
              }]
            });
          }
        });
      }
    });
  </script>
</head>

<body class="claro">
  <div id="my-table" class="hidden">
  </div>
  <div id="map"></div>
  <div id="info-pane">
    <label>Click on a county to view
      <br>OVPD record counts!</label>
  </div>
</body>

</html>

ToddFagin · ‎12-10-2015

Robert,

Once again, you have proven to be immensely helpful. It is greatly appreciated.

I have been a GIS user since the time of ol' command line ArcInfo and ArcView 3.x. While I use the desktop tools with ease, I got a very belated start on going full throttle into the web development side of things. It is always nice to have an experienced, knowledgeable individual help with the learning curve.

Again, I do greatly appreciate it.

Todd