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.
Kawish,
Sorry I can not provide any advice about React code.
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