Remove Previous Table on click to new value

192
2
07-03-2019 05:52 AM
kawishabbas
New Contributor III

Hi

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.

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Kawish,

   Sorry I can not provide any advice about React code.

0 Kudos
BenElan
Esri Contributor

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