Как вы сравниваете значения (не индекс) двух массивов разного размера в JavaScript?

1

У меня есть два массива (элементы и idValues). Элементы представляют собой полигоны (проекты) на выбранной карте и содержат их значения id. idValues - это массив, содержащий идентификаторы информационных карт сбоку для каждого проекта.

Когда я фильтрую свою карту, я хочу взять выбранные идентификаторы выбранных полигонов и сравнить эти идентификаторы с идентификационными значениями моих информационных карточек проекта на стороне, так что, если я выберу только проекты, проведенные в 2011 году на карте, я буду смотрите только информационные карты проекта, соответствующие этим проектам 2011 года.

Проблема в том, что когда я пытаюсь сравнить массивы, они, похоже, сравниваются по индексу, а не по значению, что дает мне неправильный результат, и если я пытаюсь изменить выбор фильтра, он завершает фильтрацию уже отфильтрованного массива вместо перезапуск из целого массива idValues. Например:

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...

Как сравнить каждое значение массива с другим, когда у них разная длина? И как я могу убедиться, что каждый раз, когда я изменяю требования к фильтру, это новый запрос и фильтрация уже сделанного выбора? Есть ли сообщение здесь, что я не видел, что может ответить на мой вопрос?

Мой код ниже, спасибо за любую помощь!

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
  • 1
    Немного сложно понять, что именно ты пытаешься делать - ты говоришь о cards но я не вижу ничего, что представляло бы карты. Вы бы лучше сделали простой пример, который искажает вашу проблему в чем-то, что незнакомцу легко воспроизвести.
  • 0
    Я не знаю, есть ли у вас опечатка для ваших idValues но если они должны быть на самом деле 10-001 тогда вам нужно сделать их строкой ... потому что, как только код выполняется, он выполняет математику и делает ее 10-001 значением 9 (10 минус 1). Так что ваши idValues на самом деле [9, 8, 7, 7, 6, 5, 5, 4]
Теги:
arrays
filter

1 ответ

1

Я предполагаю, что код, который вы хотите заменить, - это этот блок:

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();
    }
  }
}     

Вы можете получить необходимую функциональность, используя функции Array .map и .indexOf:

idValues.map(function (v) {
  if (!items.indexOf(v)) $("#" + v).hide();
});

Этот код скроет любые idValues которые отсутствуют в items.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню