Hi Community,
I am referring the following sample : https://developers.arcgis.com/javascript/latest/sample-code/query/ which essentially queries a hosted feature service based on attributes of features in the service.
I am trying to replicate the same on a service that I have published however, I am getting the error of Invalid Query Parameters in the console.
On looking into the script it looks like that the query is not being constructed properly. My best guess is the attribute that I am trying to query is a text field and for some reason that is not getting incorporated in the query hence, am getting this error.
Following is the code that I am executing:
require(["esri/config", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer", "esri/rest/query", "esri/rest/support/Query"], function(esriConfig, Map, MapView, FeatureLayer, GraphicsLayer, query, Query){
esriConfig.apiKey = ""
const floraURL = "xxxx"
const popupTemplate = {
title: "{Classification}, {Name}",
fieldInfos: [
{
fieldName: "Classification",
label: "Classification"
},
{
fieldName: "ParasiteInfection",
label: "Parasite Infection Identified"
},
{
fieldName: "Threats",
label: "Threats Identified"
}
],
content: "{ParasiteInfection}" + "{Threats}" + "{Classification}"
};
const resultsLayer = new GraphicsLayer();
const params = new Query({
returnGeometry: true,
outFields: ["*"]
});
var map = new Map({
basemap: "arcgis-topographic",
layers: [resultsLayer]
});
var view = new MapView({
map: map,
center: [77.18108, 28.53337],
zoom: 15,
container: "viewDiv",
popup: {
dockEnabled : true,
dockOptions: {
position: "top-right",
breakpoint: false
}
}
});
view.when(function(){
view.ui.add("optionsDiv", "bottom-right");
document.getElementById("doBtn").addEventListener("click", doQuery);
});
const attributeName = document.getElementById("attSelect");
const expressionsign = document.getElementById("signSelect");
const value = document.getElementById("valSelect");
function doQuery(){
params.where = attributeName.value + expressionsign.value + value.value;
query
.executeQueryJSON(floraURL, params)
.then(getResults)
.catch(promiseRejected);
}
function getResults(response){
const results = response.features.map(function (feature){
feature.symbol = {
type: "simple-marker", // Use simple-marker for 2D symbology
color: "green", // Set the color of the marker
size: 10, // Set the size of the marker
outline: {
color: [0, 0, 0, 0.5], // Set the outline color and transparency
width: 1 // Set the outline width
}
};
feature.popupTemplate = popupTemplate;
return feature;
});
resultsLayer.addMany(results)
view.goTo(results).then(function(){
view.openPopup({
features: results,
featureMenuOpen: true,
updateLocationEnabled: true
});
})
.catch(function (error){
if (error.name !== "AbourtError"){
console.error(error);
}
});
document.getElementById("printResults").innerHTML = results.length + "Results Found";
}
function promiseRejected(error){
console.error("Promise Rejected: ", error.message);
}
});
Am not really what am I missing here as I have just tried to replicate what is present in the sample. Additionally, am very new to API for JavaScript and trying to learn through the samples hence, there is a good possibility that something basic is missing
Any inputs would be appreciated.
