{"id":164951,"date":"2009-11-11T17:10:14","date_gmt":"2009-11-11T17:10:14","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=164951"},"modified":"2018-12-18T10:45:13","modified_gmt":"2018-12-18T18:45:13","slug":"looping-through-graphics-using-the-arcgis-api-for-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/looping-through-graphics-using-the-arcgis-api-for-javascript","title":{"rendered":"Looping through graphics using the ArcGIS API for JavaScript"},"author":4801,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[33811,27451,24921,26501],"industry":[],"product":[36831,36601],"class_list":["post-164951","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-dojo","tag-graphics","tag-javascript","tag-services","product-js-api-arcgis","product-developers"],"acf":{"short_description":"When working with the ArcGIS API for JavaScript you\u2019ll often find yourself looping through arrays, like the collection of graphics stored","flexible_content":[{"acf_fc_layout":"content","content":"

When working with the\u00a0ArcGIS API for JavaScript<\/a>\u00a0you\u2019ll often find yourself looping through arrays, like the collection of graphics stored in a graphics layer or the results of a QueryTask. In this post we\u2019ll explore two approaches for looping through arrays; using a standard for loop and working with a dojo implementation of one of the JavaScript Array Extras.<\/p>\n

For Loop<\/h3>\n

First lets look at using a for loop to add query task results to a map. The results of QueryTask are returned as an array of Graphic features so we can use a for loop to iterate through the task results and add each graphic to the map.<\/p>\n

 dojo.connect(queryTask,\"onComplete\",function(featureSet){\r\n   for(var i=0; i < featureSet.features.length; i++){\r\n     map.graphics.add(featureSet.features[i]);\r\n   })<\/pre>\n
We can optimize the code a bit by storing the length of the array in a variable. Then the length of the array doesn\u2019t need to be recalculated on each loop. The stored length (il) is just compared to the value of the counter(i).<\/p>\n
 for (var i=0; il = featureSet.features.length; i < il; i++){<\/pre>\n
JavaScript Array Extras<\/h3>\n
The JavaScript array extras are useful functions for working with arrays and are part of\u00a0ECMAScript 5th Edition,<\/a>\u00a0the next revision of the standards on which JavaScript is based. The revised standard is still under development so not all browsers support this functionality. Thankfully Dojo has implemented similar functions as part of\u00a0Dojo Core<\/a>\u00a0so we can take advantage of one of the array extras,\u00a0dojo.forEach<\/a>, to simplify the process of looping through an array of graphics. Dojo.forEach runs a function on each item in the array.<\/p>\n
 dojo.connect(queryTask,\"onComplete\",function(featureSet){\r\n   dojo.forEach (featureSet.features, function(feature) {\r\n     map.graphics.add(feature);\r\n   });\r\n });<\/pre>\n
Note that we no longer need the counter and array length variable which makes the code easier to read and can help avoid the following problems:<\/p>\n