AnsweredAssumed Answered

JSAPI: Query Related Table

Question asked by tfagin on Dec 10, 2015
Latest reply on Dec 10, 2015 by tfagin

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[i].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

Outcomes