nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }
Click table row and map goes to feature location

kawishabbas
i have some records of related table.I want to add click event on row that when clicked on table row map should go to feature location. Please consider the following snippet of code in which click event is working only for first click if i click second time to same row or any other row it does not working.
Robert Scheitlin, GISP‌ Egge-Jan Pollé Kelly Hutchins
Response from related record
array of relatedRecordGroups
 <SPAN class="keyword token">let</SPAN> fatdiv <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'fat'</SPAN><SPAN class="punctuation token">)</SPAN>
                        fatdiv<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN><SPAN class="punctuation token">{</SPAN>
                            <SPAN class="token function">queryRelated</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                                url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://172.16.6.159:6443/arcgis/rest/services/KarachiSDE/FeatureServer/1"</SPAN><SPAN class="punctuation token">,</SPAN>
                                objectIds<SPAN class="punctuation token">:</SPAN> _this<SPAN class="punctuation token">.</SPAN>state<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">,</SPAN>
                                relationshipId<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN>
                                returnGeometry<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                                outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"Name"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"FAT"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"DC"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"POP"</SPAN><SPAN class="punctuation token">]</SPAN>
                                <SPAN class="comment token">/*  params: { returnCountOnly: true } */</SPAN>
                            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
                                <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>response <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
                                    console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN>

                                    myTableDiv<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> <SPAN class="string token">''</SPAN>

                                    <SPAN class="keyword token">var</SPAN> table <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'TABLE'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                                    table<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'id'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'table'</SPAN><SPAN class="punctuation token">)</SPAN>

                                    <SPAN class="comment token">//table.appendChild(close)</SPAN>

                                    <SPAN class="keyword token">var</SPAN> thead <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'thead'</SPAN><SPAN class="punctuation token">)</SPAN>
                                    table<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>thead<SPAN class="punctuation token">)</SPAN>

                                    <SPAN class="keyword token">var</SPAN> header <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"tr"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                                    header<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'id'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'header-tr'</SPAN><SPAN class="punctuation token">)</SPAN>
                                    thead<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>header<SPAN class="punctuation token">)</SPAN>

                                    <SPAN class="keyword token">var</SPAN> tbody <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'tbody'</SPAN><SPAN class="punctuation token">)</SPAN>
                                    table<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>tbody<SPAN class="punctuation token">)</SPAN>

                                    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">.</SPAN>fields<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                                        response<SPAN class="punctuation token">.</SPAN>fields<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>j <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
                                            <SPAN class="keyword token">var</SPAN> column <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"th"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                                            column<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'id'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'table-header'</SPAN><SPAN class="punctuation token">)</SPAN>
                                            column<SPAN class="punctuation token">.</SPAN>textContent <SPAN class="operator token">=</SPAN> j<SPAN class="punctuation token">.</SPAN>alias<SPAN class="punctuation token">;</SPAN>
                                            header<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>column<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                                            <SPAN class="comment token">// console.log(j)</SPAN>
                                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
                                    <SPAN class="punctuation token">}</SPAN>
                                    <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
                                        <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">null</SPAN>
                                    <SPAN class="punctuation token">}</SPAN>


                                    response<SPAN class="punctuation token">.</SPAN>relatedRecordGroups<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>e <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>

                                        e<SPAN class="punctuation token">.</SPAN>relatedRecords<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>i <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
                                            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>i<SPAN class="punctuation token">)</SPAN>

                                            <SPAN class="keyword token">var</SPAN> row <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"tr"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                                            tbody<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>row<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                                            response<SPAN class="punctuation token">.</SPAN>fields<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>k <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
                                                <SPAN class="comment token">//console.log(response.fields<I>)    </I></SPAN>
                                                <SPAN class="keyword token">var</SPAN> columns <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"td"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                                                columns<SPAN class="punctuation token">.</SPAN>textContent <SPAN class="operator token">=</SPAN> i<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">[</SPAN>k<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
                                                row<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>columns<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                                                columns<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
                                                    <SPAN class="comment token">//console.log(i.geometry)</SPAN>

                                                    view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">goTo</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                                                        target<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                                                        zoom<SPAN class="punctuation 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="comment token">/*       console.log(i.attributes.Name)
                                                 console.log(i.attributes.FAT)
                                                 console.log(i.attributes.DC)
                                                 console.log(i.attributes.POP)  */</SPAN>

                                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
                                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="comment token">//console.log(response.relatedRecordGroups)</SPAN>
                                    myTableDiv<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>table<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                                    <SPAN class="comment token">//view.ui.add(expand, 'top-left')</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>‍</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>
Find more posts tagged with

Accepted answers

All comments

There are no accepted answers yet
Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.
Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.