I have a geprocessing service that returns JSON that I am attempting to put into a datagrid.
Snippet of JSON from GP service:
Here is the relevant code:
map.on("load", initSelectionToolbar); registry.byId("point").on("click", function() { activateTool(this.id); }); function initSelectionToolbar() { map.graphics.clear(); selectionToolbar = new Draw(map); selectionToolbar.on("draw-end", function(e) { selectionToolbar.deactivate(); var symbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_CIRCLE, 16, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([89, 95, 35]), 2 ), new Color([130, 159, 83, 0.40]) ); var graphic = new Graphic(e.geometry, symbol); map.graphics.add(graphic); map.infoWindow.hide(); }); }; function activateTool(tool) { map.graphics.clear(); map.infoWindow.hide(); // The draw.activate expects a string like "polygon" or "freehand_polygon". selectionToolbar.activate(tool); } registry.byId("searchSPs").on("click", searchSPs); function searchSPs() { var geom = map.graphics var dist = dom.byId("distance").value var distUnit = dom.byId("distanceUnits").value var params = { pointX: geom.graphics[0].geometry.x, pointY: geom.graphics[0].geometry.y, buffer: dist, unitType: distUnit } gp.submitJob(params, completeCallback, statusCallback); }; function statusCallback(jobInfo) { console.log(jobInfo.jobStatus); }; function completeCallback(jobInfo) { var id = jobInfo.jobId var data = gp.getResultData.id var stuff = gp.getResultData(id, "output", displaySPs); }; function displaySPs(outputFile) { var searchS = outputFile.value.SPs; searchS.sort(function(a, b) { return a.Distance - b.Distance }); //tried this, does not work. // var items = arrayUtils.map(searchS, function(result) { // return result; // }); var items = [] items = searchS; var data = { idProperty: "output", //This field needs to have unique values label: "StationID", //Name field for display. Not pertinent to a grid but may be used elsewhere. items: items }; store = new ItemFileReadStore({ //either way behaves the same way. //data: {identifier: 'StationID', items: items} data: data }); var grid = registry.byId("grid"); //identifier present in the store. grid.store = store //no identifier in the store, even though it is present. //window.grid.set("store", items); //this does not work. //grid.setStore(store); };
and the HTML:
<div id="rightPane" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'"> <button id="point" data-dojo-type="dijit/form/Button">Select Point</button> <br> Search Distance: <input type="text" id="distance" size="5" value="200" /> <select data-dojo-type="dijit/form/Select" id="distanceUnits"> <option value="feet">Feet</option> <option value="meters">Meters</option> </select> <br> <button id="searchSPs" data-dojo-type="dijit/form/Button" value="searchSPs">Search Splice Points</button> <br> <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" style="width:100%;height:100%; data-dojo-props=" rowsPerPage: '10', rowSelector: '20px' " class="roundedCorners shadow "> <thead> <tr> <th field="StationID ">Station ID</th> <th field="Subtype ">Subtype</th> <th field="Distance ">Distance (meters)</th> </tr> </thead> </table> </div>
When I check the datastore in the console here is what I see
No matter what I do though the datagrid is not updated with the values I am looking for. Any thoughts?
Jim
Solved! Go to Solution.
Robert,
Here is JSON from the geoprocessing service.
{
"paramName": "output",
"dataType": "GPString",
"value": {"SplicePoints": [
{
"Distance": 58.602883696309995,
"Placing_Workorder": "ENG-2-CODE",
"SP_GUID": "10bf67d1-703c-449a-b7db-6a3dbf2743ee",
"SP_OID": 71,
"SplicePointX": -9043344.1822,
"SplicePointY": 2189184.3605999984,
"StationID": "SVH-4/1/7",
"Status": 101,
"Subtype": "Pedestal"
},
{
"Distance": 23.187442940860507,
"Placing_Workorder": "ENG-2-CODE",
"SP_GUID": "8fc0139f-0c45-4ff2-969d-ad1a596e08a9",
"SP_OID": 110,
"SplicePointX": -9043393.7766,
"SplicePointY": 2189197.5232000016,
"StationID": "SVH-4/1/5-5",
"Status": 101,
"Subtype": "Pedestal"
}
]}
}
Jim
Jim,
Here I took your json data and manipulated the dgrid sample from the JS API to use your data.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Map with a Dojo dGrid</title> <link rel="stylesheet" href="http://js.arcgis.com/3.12/dojo/resources/dojo.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.12/dgrid/css/dgrid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.12/dgrid/css/skins/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } #container { height: 100%; visibility: hidden; } #bottomPane { height: 200px; } #grid { height: 100%; } .dgrid { border: none; } .field-id { cursor: pointer; } </style> <script src="http://js.arcgis.com/3.12/"></script> <script> // load dgrid, esri and dojo modules // create the grid and the map // then parse the dijit layout dijits require([ "dojo/ready", "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "dojo/_base/array", "dojo/dom-style", "dijit/registry", "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleFillSymbol", "esri/tasks/QueryTask", "esri/tasks/query", "dojo/_base/declare", "dojo/number", "dojo/on", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane" ], function ( ready, Grid, Selection, Memory, array, domStyle, registry, Map, FeatureLayer, SimpleFillSymbol, QueryTask, Query, declare, dojoNum, on, parser ) { ready(function () { parser.parse(); // 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", "StationID": "Station ID", "Distance": { "label": "Splice Distance", "formatter": dojoNum.format }, "Subtype": "Sub Type" } }, "grid"); window.map = new Map("map", { basemap: "streets", center: [-101.426, 42.972], zoom: 4 }); window.output = { "paramName": "output", "dataType": "GPString", "value": { "SplicePoints": [ { "Distance": 58.602883696309995, "Placing_Workorder": "ENG-2-CODE", "SP_GUID": "10bf67d1-703c-449a-b7db-6a3dbf2743ee", "SP_OID": 71, "SplicePointX": -9043344.1822, "SplicePointY": 2189184.3605999984, "StationID": "SVH-4/1/7", "Status": 101, "Subtype": "Pedestal" }, { "Distance": 23.187442940860507, "Placing_Workorder": "ENG-2-CODE", "SP_GUID": "8fc0139f-0c45-4ff2-969d-ad1a596e08a9", "SP_OID": 110, "SplicePointX": -9043393.7766, "SplicePointY": 2189197.5232000016, "StationID": "SVH-4/1/5-5", "Status": 101, "Subtype": "Pedestal" } ] } } map.on("load", function (evt) { // show the border container now that the dijits // are rendered and the map has loaded domStyle.set(registry.byId("container").domNode, "visibility", "visible"); populateGrid(Memory); // pass a reference to the MemoryStore constructor }); function populateGrid(Memory) { var data = array.map(window.output.value.SplicePoints, function (sp) { return { // property names used here match those used when creating the dgrid "id": sp.SP_OID, "StationID": sp.StationID, "Distance": sp.Distance, "Subtype": sp.Subtype }; }); var memStore = new Memory({ data: data }); window.grid.set("store", memStore); }; }); }); </script> </head> <body class="tundra"> <div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div> <div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'"> <div id="grid"></div> </div> </div> </body> </html>
Hi Robert,
Thank you for the suggestion. Here is the new updated code using your suggestion:
window.grid = new(declare([Grid, Selection]))({ // use Infinity so that all data is available in the grid bufferRows: Infinity, columns: { "id": "ID", "StationID": "Station ID", "Distance": { "label": "Splice Distance", "formatter": dojoNum.format }, "Subtype": "Sub Type" } }, "grid"); map.on("load", initSelectionToolbar); registry.byId("point").on("click", function() { activateTool(this.id); }); function initSelectionToolbar() { map.graphics.clear(); selectionToolbar = new Draw(map); selectionToolbar.on("draw-end", function(e) { selectionToolbar.deactivate(); var symbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_CIRCLE, 16, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([89, 95, 35]), 2 ), new Color([130, 159, 83, 0.40]) ); var graphic = new Graphic(e.geometry, symbol); map.graphics.add(graphic); }); }; function activateTool(tool) { map.graphics.clear(); map.infoWindow.hide(); // The draw.activate expects a string like "polygon" or "freehand_polygon". selectionToolbar.activate(tool); } registry.byId("searchSplicePoints").on("click", searchSplicePoints); function searchSplicePoints() { var geom = map.graphics var dist = dom.byId("distance").value var distUnit = dom.byId("distanceUnits").value var params = { pointX: geom.graphics[0].geometry.x, pointY: geom.graphics[0].geometry.y, buffer: dist, unitType: distUnit } gp.submitJob(params, completeCallback, statusCallback); }; function statusCallback(jobInfo) { console.log(jobInfo.jobStatus); }; function completeCallback(jobInfo) { var id = jobInfo.jobId var data = gp.getResultData.id var stuff = gp.getResultData(id, "output", displaySplicePoints); }; function displaySplicePoints(outputFile) { var searchSplice = outputFile.value.SplicePoints; console.log(searchSplice); searchSplice.sort(function(a, b) { return a.Distance - b.Distance }); var data = arrayUtils.map(searchSplice, function(sp) { return { // property names used here match those used when creating the dgrid "id": searchSplice.SP_OID, "StationID": searchSplice.StationID, "Distance": searchSplice.Distance, "Subtype": searchSplice.Subtype }; }); console.log(data); var memStore = new Memory({ data: data }); window.grid.set("store", memStore); };
The datagrid now displays the cells, however they are empty. When I check my console, I can see searchSplice has information, but data has everything undefined.
Jim,
OK you need to pay close attention to your code.
You have:
var data = arrayUtils.map(searchSplice, function(sp) { return { // property names used here match those used when creating the dgrid "id": searchSplice.SP_OID, "StationID": searchSplice.StationID, "Distance": searchSplice.Distance, "Subtype": searchSplice.Subtype }; });
So you are looping over the searchSplice array and when you do that using arrayUtils.map you are defining a var for each object in that array and the vars name in the code is sp not searchSplice, because searchSplice is the whole array and not the individual object of the array.
So it should be:
var data = arrayUtils.map(searchSplice, function(sp) { return { // property names used here match those used when creating the dgrid "id": sp.SP_OID, "StationID": sp.StationID, "Distance": sp.Distance, "Subtype": sp.Subtype }; });
*sigh*
Thanks Robert. That worked.
Stupid thing to miss, but at least it now populates the grid correctly.
Jim
Jim,
Glad to help.