I have a map with a slide out panel that houses a list of elevation certificates, the certificates are grouped into collapsing menus by year issued. My problem is that to build the menu out takes two queries since there are 1755 records. Being asynchronous by design JS does both in quick succession and builds out my menu in the order the queries come back. That means it may start with the second batch first. How can I make it do the first then the second? I'm already using execute(). then(). If I cant do it with the query logic but can combine the two feature sets somehow I could sort that and then build off the master feature set but I don't see how to do that either. If there is a better way to page through the feature class than using the start parameter of the query I'm open to completely reformulating this.
<SPAN class="keyword token">var</SPAN> queryTask <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">QueryTask</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://gis.baycountyfl.gov/arcgis/rest/services/ElevationCertificates/MapServer/0"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> query <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
query<SPAN class="punctuation token">.</SPAN>returnGeometry <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
query<SPAN class="punctuation token">.</SPAN>outFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"DateIssued"</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"Address"</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"OBJECTID"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
query<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> <SPAN class="string token">"1=1"</SPAN><SPAN class="punctuation token">;</SPAN>
query<SPAN class="punctuation token">.</SPAN>orderByFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"DateIssued"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
query<SPAN class="punctuation token">.</SPAN>outSpatialReference <SPAN class="operator token">=</SPAN> <SPAN class="number token">3857</SPAN><SPAN class="punctuation token">;</SPAN>
query<SPAN class="punctuation token">.</SPAN>num <SPAN class="operator token">=</SPAN> <SPAN class="number token">1000</SPAN><SPAN class="punctuation token">;</SPAN>
queryTask<SPAN class="punctuation token">.</SPAN><SPAN class="token function">executeForCount</SPAN><SPAN class="punctuation token">(</SPAN>query<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>count<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> step<SPAN class="operator token">=</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> step <SPAN class="operator token"><</SPAN> count<SPAN class="punctuation token">;</SPAN> step <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="number token">1000</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
query<SPAN class="punctuation token">.</SPAN>start <SPAN class="operator token">=</SPAN> step<SPAN class="punctuation token">;</SPAN>
queryTask<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</SPAN><SPAN class="punctuation token">(</SPAN>query<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> i<SPAN class="operator token">=</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> results<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN> i<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">let</SPAN> recordDate <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Date</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>DateIssued<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">let</SPAN> recordYear <SPAN class="operator token">=</SPAN> recordDate<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getFullYear</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN><SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#content"</SPAN> <SPAN class="operator token">+</SPAN> recordYear<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
<SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#addressListDiv"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'<button type="button" class="collapsible" id="button'</SPAN> <SPAN class="operator token">+</SPAN> recordYear <SPAN class="operator token">+</SPAN> <SPAN class="string token">'">'</SPAN> <SPAN class="operator token">+</SPAN> recordYear <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</button>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#addressListDiv"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'<div class="content" id="content'</SPAN> <SPAN class="operator token">+</SPAN> recordYear <SPAN class="operator token">+</SPAN> <SPAN class="string token">'"></div>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#button"</SPAN> <SPAN class="operator token">+</SPAN> recordYear<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>classList<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toggle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"active"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> content <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>nextElementSibling<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>content<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>display <SPAN class="operator token">===</SPAN> <SPAN class="string token">"block"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
content<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>display <SPAN class="operator token">=</SPAN> <SPAN class="string token">"none"</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
content<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>display <SPAN class="operator token">=</SPAN> <SPAN class="string token">"block"</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">let</SPAN> OBJECTID <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>OBJECTID
<SPAN class="keyword token">let</SPAN> address <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>Address
<SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#content"</SPAN> <SPAN class="operator token">+</SPAN> recordYear<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'<p class="address" id="'</SPAN> <SPAN class="operator token">+</SPAN> OBJECTID <SPAN class="operator token">+</SPAN> <SPAN class="string token">'">'</SPAN> <SPAN class="operator token">+</SPAN> address <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</p>'</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">let</SPAN> center <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">;</SPAN>
<SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#"</SPAN> <SPAN class="operator token">+</SPAN> OBJECTID<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
view<SPAN class="punctuation token">.</SPAN>center <SPAN class="operator token">=</SPAN> center<SPAN class="punctuation token">;</SPAN>
view<SPAN class="punctuation token">.</SPAN>zoom <SPAN class="operator token">=</SPAN> <SPAN class="number token">18</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>