Click table row and map goes to feature location

kawishabbas — Sat, 11 Dec 2021 22:08:40 GMT

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

 let fatdiv = document.getElementById('fat')
                        fatdiv.addEventListener('click', () =>{
                            queryRelated({
                                url: "https://172.16.6.159:6443/arcgis/rest/services/KarachiSDE/FeatureServer/1",
                                objectIds: _this.state.id,
                                relationshipId: 1,
                                returnGeometry: true,
                                outFields: ["Name", "FAT", "DC", "POP"]
                                /*  params: { returnCountOnly: true } */
                            })
                                .then(response => {
                                    console.log(response)

                                    myTableDiv.innerHTML = ''

                                    var table = document.createElement('TABLE');
                                    table.setAttribute('id', 'table')

                                    //table.appendChild(close)

                                    var thead = document.createElement('thead')
                                    table.appendChild(thead)

                                    var header = document.createElement("tr");
                                    header.setAttribute('id', 'header-tr')
                                    thead.appendChild(header)

                                    var tbody = document.createElement('tbody')
                                    table.appendChild(tbody)

                                    if (response.fields) {
                                        response.fields.forEach(j => {
                                            var column = document.createElement("th");
                                            column.setAttribute('id', 'table-header')
                                            column.textContent = j.alias;
                                            header.appendChild(column);
                                            // console.log(j)
                                        })
                                    }
                                    else {
                                        return null
                                    }


                                    response.relatedRecordGroups.forEach(e => {

                                        e.relatedRecords.forEach(i => {
                                            console.log(i)

                                            var row = document.createElement("tr");
                                            tbody.appendChild(row);

                                            response.fields.forEach(k => {
                                                //console.log(response.fields)    
                                                var columns = document.createElement("td");
                                                columns.textContent = i.attributes[k.name];
                                                row.appendChild(columns);

                                                columns.addEventListener('click', () => {
                                                    //console.log(i.geometry)

                                                    view.goTo({
                                                        target: [i.geometry],
                                                        zoom: 18
                                                    })
                                                })

                                            })

                                            /*       console.log(i.attributes.Name)
                                                 console.log(i.attributes.FAT)
                                                 console.log(i.attributes.DC)
                                                 console.log(i.attributes.POP)  */

                                        })
                                    }) //console.log(response.relatedRecordGroups)
                                    myTableDiv.appendChild(table);
                                    //view.ui.add(expand, 'top-left')



                                })
                        })‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

topic Click table row and map goes to feature location in ArcGIS JavaScript Maps SDK Questions

Click table row and map goes to feature location