Getting email addresses of pointers after selection with JSON or array and ArcGIS API for JavaScript?

Question

I am trying to create a map where I can create a selection area, and get info of all graphic pointers under it, I tried to modify with following example, but they are using web service and queries, and I want it with json or array.

Thats the example I am following

I want to get email addresses of pointers after selection. Here is a fiddle to start with.

Code Snippet from the fiddle:

 var map;

  require([
    "esri/map", 
    "esri/geometry/Point",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/graphic", 
    "esri/layers/GraphicsLayer",
    "dojo/domReady!"
  ], function(
    Map, Point, SimpleMarkerSymbol, Graphic, GraphicsLayer
  ) {
    map = new Map("map", {
      basemap: "streets",
      center: [-88.21,42.21],
      zoom: 10
    });
    map.on("load", function() {
      var content = '[email protected]';
      var gl = new GraphicsLayer();
      var p = new Point(-88.380801, 42.10560);
      var s = new SimpleMarkerSymbol().setSize(20);
      var g = new Graphic(p, s,{ 'title': 'Title', 'content': content }, new esri.InfoTemplate('${title}', '${content}'));
      gl.add(g);
      map.addLayer(gl);
    });
  });

Answer 1

Here is my solution (see also this fiddle)

var map;
var gl;
var highlightSymbol;
var s;

require([
    "esri/map",
    "esri/geometry/Point",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/graphic",
    "esri/layers/GraphicsLayer",
    "esri/toolbars/draw",
    "dojo/domReady!"], function (
Map, Point, SimpleMarkerSymbol, Graphic, GraphicsLayer) {
    map = new Map("map", {
        basemap: "streets",
        center: [-88.21, 42.21],
        zoom: 10
    });
    map.on("load", function () {
        highlightSymbol = new SimpleMarkerSymbol().setSize(20);
        highlightSymbol.setColor('green');
        //add drawing tool
        var tb = new esri.toolbars.Draw(map);
        //set drawing mode to extent
        tb.activate(esri.toolbars.Draw.EXTENT);
        //find points in Extent when user completes drawing extent
        tb.on("draw-end", findPointsInExtent);


        var content = '[email protected]';
        var content1 = '[email protected]';
        gl = new GraphicsLayer();
        var p = new Point(-88.380801, 42.10560);
        var p1 = new Point(-88.390801, 42.11560);
        s = new SimpleMarkerSymbol().setSize(20);
        var g = new Graphic(p, s, {
            'title': 'Title',
            'content': content
        }, new esri.InfoTemplate('${title}', '${content}'));
        var g1 = new Graphic(p1, s, {
            'title': 'Title',
            'content': content1
        }, new esri.InfoTemplate('${title}', '${content}'));
        gl.add(g);
        gl.add(g1);
        map.addLayer(gl);


    });
    //find all points within argument extent
    function findPointsInExtent(extent) {
        var results = [];

        for (i = 0; i < gl.graphics.length; i++) {
            if (extent.geometry.contains(gl.graphics[i].geometry)) {
                gl.graphics[i].setSymbol(highlightSymbol);
                results.push(gl.graphics[i].getContent());
            }
            //else if point was previously highlighted, reset its symbology
            else if (gl.graphics[i].symbol == highlightSymbol) {
                gl.graphics[i].setSymbol(s);
            }
        }

        //display list of emails in extent
        document.getElementById("result").innerHTML = "<table><tbody>" + results.join("\n") + "</tbody></table>";
    }
});