Unable to find all points in extent area using ArcGIS API for JavaScript?

Question

I am trying to create a map where I can draw a selection area, and get info of all graphic pointers under it, I tried to modify ArcGis example but the problem now is that I can only able to select only last pointer and its data.

Below is my code, You can check the fiddle as well.

var gl;
var highlightSymbol;
var defaultSymbol;
var jsn = [{"Name" : "Wessam AlDahin","Email" : "[email protected]","City" : "Dubai","Latitude" : 23.408847304,"Longitude" : 54.41760682,}, {"Name" : "Danish Adeel","Email" : "[email protected]","City" : "Sharjah","Latitude" : 23.325462417,"Longitude" : 54.390645617,}, {"Name" : "Kashif Makhdoom","Email" : "[email protected]","City" : "Dubai","Latitude" : 23.27369932,"Longitude" : 54.285749593,}];

require([
    "esri/map",
    "esri/geometry/Point",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/graphic",
    "esri/layers/GraphicsLayer",
    "esri/toolbars/draw",
    "esri/symbols/PictureMarkerSymbol",
    "esri/InfoTemplate",
    "dojo/domReady!"], function (Map, Point, SimpleMarkerSymbol, Graphic, GraphicsLayer, Draw, PictureMarkerSymbol, InfoTemplate) {
    function initToolbar(map) {
        var tb = new Draw(map);
        tb.on("draw-end", findPointsInExtent);
        tb.activate(Draw.EXTENT);
    }

    function findPointsInExtent(result) {
        var extent = result.geometry;
        var results = [];
        require(["dojo/_base/array"], function (array) {
            array.forEach(gl.graphics, function (graphic) {
                if (extent.contains(graphic.geometry)) {
                    graphic.setSymbol(highlightSymbol);
                    results.push(graphic.getContent());
                }
                //else if point was previously highlighted, reset its symbology
                else if (graphic.symbol == highlightSymbol) {
                    graphic.setSymbol(defaultSymbol);
                }
            });
        });

        //display number of points in extent
        dojo.byId("inextent").innerHTML = results.length;

        //display list of points in extent
        dojo.byId("results").innerHTML = "<table><tbody>" + results.join("") + "</tbody></table>";
    }

    map = new Map("map", {
            basemap : "streets",
            center : [54.285749593, 23.27369932],
            zoom : 10
        });
    map.on("load", function () {
        $.each(jsn, function (key, val) {
            gl = new GraphicsLayer();
            name = this.Name;
            email = this.Email;
            content = '<div class="win"><p>' + email + '</p><p>' + this.City + '</p><p class="user_status">' + status + '</p></div>';
            pointVal = new Point(this.Longitude, this.Latitude);
            symbolVal = new PictureMarkerSymbol({
                "url" : 'https://webdesign.danols.com/static/template/images/icons/light/pin_map_icon&48.png',
                "height" : 20,
                "width" : 20
            });

            g = new Graphic(pointVal, symbolVal, {
                'title' : name,
                'content' : content
            }, new esri.InfoTemplate('${title}', '${content}'));
            gl.add(g);

            map.addLayer(gl);

        });

        initToolbar(this);
    });
    highlightSymbol = new SimpleMarkerSymbol().setColor(new dojo.Color([255, 0, 0]));
    defaultSymbol = new PictureMarkerSymbol({"url" : 'https://webdesign.danols.com/static/template/images/icons/light/pin_map_icon&48.png',"height" : 20,"width" : 20});
});

Answer 1

In the map's "load" event, you were looping through each of the points. For each point, you were creating a new graphics layer and adding that point to the graphics layer. By moving the creation of the graphic layer and its addition to the map to outside your $.each loop, all the points were added to a single graphics layer.

    map.on("load", function () {
        gl = new GraphicsLayer();
        $.each(jsn, function (key, val) {
            name = this.Name;
            email = this.Email;
            content = '<div class="win"><p>' + email + '</p><p>' + this.City + '</p><p class="user_status">' + status + '</p></div>';
            pointVal = new Point(this.Longitude, this.Latitude);
            symbolVal = new PictureMarkerSymbol({
                "url" : 'https://webdesign.danols.com/static/template/images/icons/light/pin_map_icon&48.png',
                "height" : 20,
                "width" : 20
            });

            g = new Graphic(pointVal, symbolVal, {
                'title' : name,
                'content' : content
            }, new esri.InfoTemplate('${title}', '${content}'));
            gl.add(g);


        });
        map.addLayer(gl);

        initToolbar(this);
    });

Fiddle