AJAX function call not adding data to the variable after the function is executed

Viewed 33

I am calling an AJAX function to fetch data from the server, and adding that data to the userLayer variable within my ajax function. Hence once the call is executed, it should be having the data within it. However, it returns undefined and when I do console.log(map.hasLayer(userLayer), "check if layer exists"), it returns false when technically it should return true, implying that something is wrong within the AJAX function or the AJAX call I am making. I am using Promise as well. Below is the code:

Calling the addUserLayerTreemail AJAX function

userLayer = this.addUserLayerTreemail(
            $loadingContent,
            $loadingDiv,
            treeLayers,
            map,
            heritage_cluster_layer_view_18,
            flowering_cluster_layer_view_18,
            IMP_FIELDS,
            suggestion,
            userPlottedLayerView18Options,
            userLayer,
            $speciesError
          ).then( function(response){

            //the map should have userLayer after the ajax call, but it returns false
            console.log(map.hasLayer(userLayer), "check if layer exists")
            setSearchState(true);
            $mapSearch.blur();
          }).catch(function(err){
            console.log("error caught", err)
          });

Defining the addUserLayerTreemail AJAX function

addUserLayerTreemail(
  $loadingContent,
  $loadingDiv,
  treeLayers,
  map,
  heritage_cluster_layer_view_18,
  flowering_cluster_layer_view_18,
  IMP_FIELDS,
  suggestion,
  userPlottedLayerView18Options,
  userLayer,
  $speciesError
) {

  $loadingContent.text('Loading Search Results');
  addClass($loadingDiv, 'show');
  removeClass($speciesError, 'show-error');


  // remove all layers in case they are present
  for (let layer in treeLayers) {
    if (map.hasLayer(treeLayers[layer])) {
      treeLayers[layer].removeFrom(map);
    }
  }
  if (map.hasLayer(heritage_cluster_layer_view_18)) {
    heritage_cluster_layer_view_18.removeFrom(map);
  }
  if (map.hasLayer(flowering_cluster_layer_view_18)) {
    flowering_cluster_layer_view_18.removeFrom(map);
  }

  if(map.hasLayer(userLayer)) {
    userLayer.removeFrom(map);
  }

  // let checked = this.getCurrentFilter(),
  const featureType = 'USERTREE';

  let queryString = '';

  suggestion = suggestion.toLowerCase();

  let $selectedOptionSearch = $('.mapFilterBtns.is-active').data('value');
  let all_trees="";

  console.log($('#mapSearch').val(), "searched value")
  let searchText= $('#mapSearch').val();

  let configData = {"searchText": searchText, "searchType" : $selectedOptionSearch};

    console.log("config", configData)


    return new Promise(function(resolve, reject){

      $.ajax({
        url: "../apis/Search",
        method: 'GET',
        dataType: 'json',
        data : configData,
        contentType: 'application/json',
        success: response => {
          console.log("ajax response in the ajax function",response);

          resolve(response);

            let conditionalVal = " or ";
          let treeID = "";

          for(let i=0; i<response.length; i++) {
            treeID = response[i]['TreeID']
            if(i==0) {
                all_trees = `${IMP_FIELDS.TREEMAIL_SEARCH} like '%${treeID}%'`;
            } else {
                all_trees += conditionalVal + `${IMP_FIELDS.TREEMAIL_SEARCH} like '%${treeID}%'`;
            }
          }
          console.log("all trees here",all_trees);
          queryString = all_trees + ` and Actual_Tree_Type like '%${featureType}%'`;
          let isSearch = true;

          let layerOptions = $.extend(
            {
              where: queryString
            },
            userPlottedLayerView18Options
          );

          layerOptions.url = mapLayers.userPlantedLayer;
          
          userLayer = L.esri.featureLayer(layerOptions);
          userLayer
            .query()
            .where(queryString)
            .run((err, featureCollection, response) => {
              
                //adding the data to userLayer and then adding userLayer to map here
                userLayer.addTo(map);
            });

          //Returning the userLayer here
          return userLayer;
              },
              error : function(err){
                reject(err, "printing error here");
              }
      });
    })
}
0 Answers
Related