I have two arrays (items and idValues). Items represents polygons (projects) on a map that are selected and contains their id values. idValues is an array that contains the ids of information cards on the side for each project.
When I filter my map, I want to take the selected ids of the selected polygons and compare those ids to the id values of my project information cards on the side so that, if I select only projects conducted in 2011 on the map, I will only see the project information cards that correspond to those 2011 projects.
The problem for me is that when I try to compare the arrays, they seem to compare by index and not by value which gives me the wrong result and if I try to change the filter selection, it ends up filtering the already filtered array instead of restarting from the whole idValues array.For example:
idValues = [10-001, 10-002, 10-003, 11-004, 11-005, 11-006, 12-007, 12-008];
items = [11-004, 11-005, 11-006];
//I only want to show the cards that have idValues == to items values, but they are compared by index:
//10-001 !== 11-004
//10-002 !== 11-005 etc...
How do I compare each value of an array to another when they have different lengths? And how do I make sure each time I change the filter requirements that it's a new query and filtering the already made selection? Is there a post here that I haven't seen that may answer my question?
My code is below, thanks for any help!
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/dijit/PopupTemplate",
"esri/dijit/Legend",
"dojo/_base/array",
"dojo/on",
"dojo/dom",
"dojo/dom-construct",
"dojo/domReady!"
], function(
Map,
FeatureLayer,
PopupTemplate,
Legend,
array,
on,
dom,
domConst
) {
var map = new Map("viewDiv", {
basemap: "gray-vector",
center: [ -85.20127, 35.12355 ],
zoom: 1
});
//Add layer to the map
var serviceUrl = "https://services2.arcgis.com/C8EMgrsFcRFL6LrL/arcgis/rest/services/HISAProjects_WFL1/FeatureServer/0?token=_3OEVd8Vn48n6NCc5StDZJZXhDbQmb6T3mqGZSNDqOQeg9whVAFaSgX2TnzlRsAy9R2CtzlrgdTk-ytdSxkYUyeQJEMV_r4v2hJska2KFGgC9ihtGe0twoO6zCZxcYfycDQmf80zvfRSoI8OtNQWYXLArn0yGc1WnvSInTMd8jm46yLvekFaQOmznJEtX73-bratx_zJGjN_SQ02s4kkgkgveg463iw7Ub1TIr0kjos";
var layer = new FeatureLayer(serviceUrl, {
outFields: [ "FY", "HISAProjects_final_1262017_cs_2", "HISAProjects_final_1262017_csv1", "HISAProjects_final_1262017_cs_4", "HISAProjects_final_1262017_cs_5", "HISAProjects_final_1262017_csv_", "HISAProjects_final_1262017_cs_3", "HISAProjects_final_1262017_cs_1", "HabitatData12_4_17_ProjectNum"],
infoTemplate: new PopupTemplate({
title: "{HISAProjects_final_1262017_cs_4}",
description: "<br />Lead PI: {HISAProjects_final_1262017_cs_5}"
+ "<br />Region: {HISAProjects_final_1262017_csv_}"
+ "<br />Year: {FY}"
+ "<br />Primary Habitat Type: {HISAProjects_final_1262017_cs_2}"
+ "<br />Secondary Habitat Type: {HISAProjects_final_1262017_cs_3}"
+ "<br />Distance from shore: {HISAProjects_final_1262017_csv1}"
+ "<br />Secondary Distance from shore: {HISAProjects_final_1262017_cs_1}"
//
// "Learn more.." link connected to individual main-areaCard info windows
})
});
map.addLayer(layer);
var legend = new Legend({
map: map,
layerInfos: [{
layer: layer,
title: "Habitat Type"
}]
}, "legendDiv");
// "Global" Variables
var filter1 = document.getElementById("filterhabitat");
var filter2 = document.getElementById("filterlocation");
var filter3 = document.getElementById("filteryear");
var button = document.getElementById("button");
var idValues = [];
var elem = document.getElementsByClassName("clickable");
//console.log(elem);
//console.log(elem.attributes);
map.on("load", function(evt){
legend.startup();
for(var i = 0; i < elem.length; ++i){
if(elem[i].attributes.id.value != "undefined"){
if(elem[i].attributes.id.value){
var elements = elem[i].attributes.id.value;
idValues.push(elements);
}
}
} //end for loop
console.log("idValues: " + idValues);
button.addEventListener("click", function(e){
habitatValue = filter1.options[filter1.selectedIndex].value;
distanceValue = filter2.options[filter2.selectedIndex].value;
yearValue = filter3.options[filter3.selectedIndex].value;
pushValues(habitatValue, distanceValue, yearValue);
});
}); //end of map event function
function pushValues (habitatValue, distanceValue, yearValue){
var expressionArray = [];
if (habitatValue) {
var str = `HISAProjects_final_1262017_cs_2 = '${habitatValue}'`;
expressionArray.push(str);
}
if (distanceValue) {
var str = `HISAProjects_final_1262017_csv1 = '${distanceValue}'`;
expressionArray.push(str);
}
if (yearValue) {
var str = `FY = '${yearValue}'`;
expressionArray.push(str);
}
console.log(expressionArray);
var definitionExpression = expressionArray.join(' AND ');
updateDefinitionExpression(definitionExpression);
}
function updateDefinitionExpression(definitionExpression){
//var definitionExpression = "HISAProjects_final_1262017_cs_2 = 'PELAGIC' AND FY = '2010'";
layer.setDefinitionExpression(definitionExpression);
layer.on('update-end', function(evt){
var projNumArr = [];
array.map(layer.graphics, function(gra){
projNumArr.push(gra.attributes.HabitatData12_4_17_ProjectNum);
});
var items = projNumArr;
// console.log("items: " + items);
// console.log("ids: " + idValues);
for(i in idValues){
console.log("items: " + items[i]);
console.log("idValues: " + idValues[i]);
if(idValues.length > 0){
if (idValues[i] !== items[i]){
$("#" + idValues[i]).hide();
}
}
}
}); //END HERE
map.infoWindow.hide();
}//end updateDefinitionExpression function
}); // end Function
cardsbut I don't see anything representing cards. You would be better off making a simple example that distills your problem in something that's easy for a stranger to reproduce.idValuesbut if those are supposed to actually be10-001then you need to make them a string...because once the code runs, it's doing math and making it a number value of9(10 minus 1). So your idValues is actually[9, 8, 7, 7, 6, 5, 5, 4]