Remove Previous Table on click to new value

kawishabbas — Fri, 10 Dec 2021 21:29:06 GMT
Please review the following code.
I have a problem that i want to remove previous table when user click new value (it means hide previous table and show new table of new value). i have added image to understand problem.
Robert Scheitlin, GISP‌ Rene Rubalcava‌ Kelly Hutchins‌
import React from 'react';
import { loadModules } from 'react-arcgis';
import Axios from 'axios';


export default class QueryODB extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            ODB: [],
            server:[]
        }
    }

     componentDidMount(){
        let map = this.props.map;
        let view = this.props.view;

        loadModules(["esri/tasks/support/Query", "esri/tasks/QueryTask", "esri/layers/FeatureLayer", 'esri/widgets/Expand', "esri/layers/GraphicsLayer", "esri/geometry/geometryEngine",
            "esri/Graphic", "esri/request",
        ])
            .then(([Query, QueryTask, FeatureLayer, Expand, GraphicsLayer, geometryEngine, Graphic, Request]) => {
            
           /*  view.ui.add(
                [
                    new Expand({
                        view:view,
                        content: document.getElementById('attribute'),
                        group: 'bottom-right',
                        expanded: false
                    })
                ],
                "top-left"
            ) */
            view.ui.add(
                [
                    new Expand({
                        view: view,
                        content: document.getElementById("infoDiv"),
                        group: "bottom-right",
                        expanded: false,
                        expandIconClass: "fas fa-object-group",
                    })
                ],
                "top-right"
            );

            let OdbfromPOP = document.getElementById('odb-type');
            
            const ODBRenderer = {
                type: "simple", // autocasts as new SimpleRenderer()
                symbol: {
                    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                    size: 6,
                    color: [0, 255, 255],
                    outline: null
                }
            };
/* 
            const FiberRenderer = {
                type: "simple", // autocasts as new SimpleRenderer()
                symbol: {
                    type: "simple-line", // autocasts as new SimpleLineSymbol()
                    width: "2px",
                    color: [0, 255, 255],
                    outline: null
                }
            };
 */

            // *********** ODB Query ***************
                let odburl = "http://172.16.6.64:6080/arcgis/rest/services/KarachiSDE/FeatureServer/1";
              
                let ODB = new FeatureLayer({
                    url: odburl,
                    title: 'ODB/DC',
                    renderer: ODBRenderer,
                    listMode: "hide",
                    popupTemplate: {
                        title: "ODB/DC",
                        content: [{
                            type: "fields",
                            fieldInfos: [{
                                fieldName: "Name",
                                label: "Name",
                                format: {
                                    digitSeparator: true,
                                    places: 0
                                }
                            }, {
                                fieldName: "Splitter",
                                label: "Splitter",
                                format: {
                                    digitSeparator: true,
                                    places: 0
                                }
                            }, {
                                fieldName: "ID",
                                label: "ID",
                                format: {
                                    digitSeparator: false,
                                    places: 0
                                }
                            }, {
                                fieldName: "POP",
                                label: "POP",
                                format: {
                                    digitSeparator: false,
                                    places: 0
                                }
                            }, {
                                fieldName: "Placement",
                                label: "Placement",
                                format: {
                                    digitSeparator: true,
                                    places: 0
                                }
                            }, {
                                fieldName: "City",
                                label: "City",
                                format: {
                                    digitSeparator: true,
                                    places: 0
                                }
                            }, {
                                fieldName: "Comment",
                                label: "Comment",
                                format: {
                                    digitSeparator: true,
                                    places: 0
                                }
                            }]
                        }]
                    }

                })
                map.add(ODB)

                let queryTask = new QueryTask({
                    url: odburl
                });


                var resultsLayer = new GraphicsLayer({
                    listMode: "hide"
                });
                map.add(resultsLayer)

                view.when(() => {
                    return ODB.when(function () {
                        var query = ODB.createQuery();
                        return ODB.queryFeatures(query);
                    })

                })
                    .then(getValues)
                    .then(getUniqueValues)
                    .then(addToSelect)

                function getValues(response) {
                    var features = response.features;
                    var values = features.map((feature, index) => {
                        return feature.attributes.POP;
                    });
                    return values;
                }

                function getUniqueValues(values) {
                    var uniqueValues = [];

                    values.map((item, i) => {
                        if (
                            (uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) &&
                            item !== ""
                        ) {
                            uniqueValues.push(item);
                        }
                    });
                    return uniqueValues;
                }

                function addToSelect(values) {
                    values.sort();
                    values.map((value, index) => {
                        var option = document.createElement("option");
                        option.text = value;
                        OdbfromPOP.add(option);
                    });

                    return setWellsDefinitionExpression(OdbfromPOP.value);
                }

                function setWellsDefinitionExpression(newValue) {
                    
                    ODB.definitionExpression = "POP = '" + newValue + "'";

                    let queryodb = new Query({
                        returnGeometry: true,
                        outFields: ["Name", "ID", "Placement", "Comment", "POP"],
                        where: ODB.definitionExpression
                       
                    })

                    queryTask.executeForCount(queryodb).then(function (results) {
                        document.getElementById('results').innerHTML = " ODBs are " + results;
                                       
                    });

                    queryTask.execute(queryodb).then(function (response) {

                        var attribute = document.getElementById("attribute");

                        var table = document.createElement("table");
                        table.border = 1;
                        var header = document.createElement("tr");
                        table.appendChild(header);
                        
                        response.fields.forEach(element => {
                            var column = document.createElement("th");
                            column.textContent = element.alias;
                            header.appendChild(column);
				            //alert(response.data.fields.alias);
                        });

                        response.features.forEach(res => {
                            // console.log(response.features)
                            var row = document.createElement("tr");
                            table.appendChild(row);

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

                        })
                        attribute.appendChild(table);

                    });
                    
                }

                // set a new definitionExpression on the wells layer
                // and create a new buffer around the new wells
                OdbfromPOP.addEventListener("change", function (event) {
                    let btn = document.getElementById('query-button');    
                    
                    btn.addEventListener('click', () => { 
                        let type = event.target.value;
                        document.getElementById('pop').innerHTML = type                  
                        setWellsDefinitionExpression(type)

                        view.ui.add('attribute', "top-left")            
                       
                    })
                    
                });
              
        })

    }
    render(){
        return (
            <div>
                <div id="infoDiv">

                    SELECT * FROM DC_ODB WHERE:
                    <div> <strong>POP = <span id="pop"></span></strong></div>
                    <select id="odb-type">
                        <option value = " ">...Unselect ODB...</option>
                    </select><br />

                    <button id="query-button">Click to query</button><br />
                    <div id="results"></div>                
                </div>
                <div id="attribute"></div>
            </div>
        )
    }
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
I select POP ID(21001) to show it's record on map as a table. it's working.
when i select second POP ID (21004), the new table opens whereas old table does not disappear.
Re: Remove Previous Table on click to new value

RobertScheitlin__GISP — Wed, 03 Jul 2019 13:39:40 GMT
Kawish,
Sorry I can not provide any advice about React code.
Re: Remove Previous Table on click to new value

BenElan — Fri, 05 Jul 2019 23:52:35 GMT
You need to unmount your component:
componentWillUnmount() {
// clear the previous table here
}
Take a look at react's example: https://reactjs.org/docs/state-and-lifecycle.html
topic Re: Remove Previous Table on click to new value in ArcGIS JavaScript Maps SDK Questions

Remove Previous Table on click to new value

Re: Remove Previous Table on click to new value

Re: Remove Previous Table on click to new value
