CODEWITHSUNDEEP
javascriptajaxdjango
GhostRavenstorm
GhostRavenstorm

Reputation: 754

AJAX function not receiving return data from a function it calls

This is a bit difficult to explain, because I'm not sure what's happening. In my code base for this Django web project, I have a custom list class that manages several LI elements. The class has a 'find' method that returns the DOM element of the matching string.

Next, I have an AJAX query that makes a server-side python call to process data and calls my response function. I have my python scripts running an analysis for each item in my list, so it's making subsequent AJAX calls. The response function for my AJAX is calling the 'find' method from my list object passing in text data AJAX receives from my python script.

The 'find' method is executing successfully and return correct results (or rather "trying" to return the results). It returns something successfully on the first item, but every item after that is 'undefined'. My console logs in the 'find' method give me the correct return object before returning it, but the logs immediately after calling 'find' give me something 'undefined.'

Is this a scoping issue with AJAX trying to call it repeatedly?

/* This is a large class, so I've omitted irrelevant members to the question. */
class UnorderedList{
   constructor(){
      this.__element = document.createElement("UL");
      this.__listItems = [];
   }

   /* Creates a LI element for this list with the given string. */
   addItem(str){...}

   /* Returns the inner text of a LI element. */
   getTextFromIndex(n){...}

   /* Returns the LI element for the matching string. */
   find(str){
      function __find(str, listItems, n=0){
         if(n >= listItems.length){
            /* B: */ console.log("no results found for '"+str+"'");
            return false;
         }
         if(str == listItems[n].innerText){
            /* C: */ console.log("search successful");
            var objLi = listItems[n];
            /* D: */ console.log(objLi);        // Gives the correct object everytime.
            return objLi;
         }
         __find(str, listItems, ++n);
      }

      /* A: */ console.log("searching for '"+str+"'");
      return __find(str, this.__listItems);
  }
}


class Analyser{

  constructor(){
     /* Assume this list already contains data. */
     this.__entityList = new UnorderedList();
  }

  analyse(n=0){
     if(n >= this.__entityList.filterLength) return;

     $.ajax({
        type: "POST",
        url: url,
        data: {
           csrfmiddlewaretoken: csrfToken,
           textData: this.__entityList.getTextFromIndex(n),
           nResults: MAX_RESULTS,
           nIteration: n,
        },
        success: this.response.bind(this)
     });
  }

  response(response){

     var results = JSON.parse(response);

     var objLi = this.__entityList.find(results.textData)
     /* E: */ console.log(objLi);    // Every item after the first is undefined.

     this.analyse(Number(results.nIteration) + 1);
  }
}

Using curly braces to represent HTML tags

Console Log:

A: searching for "some text string"

C: search successful

D: {li style=""}

E: {li style=""}

A: searching for "some text string"

C: search successful

D: {li style=""}

E: undefined

A: searching for "some text string"

C: search successful

D: {li style=""}

E: undefined

Upvotes: 1

Views: 75

Answers (1)

Sachin
Sachin

Reputation: 3674

You have missed the return statement in the recursive call to __find function.

function __find(str, listItems, n=0){
     // rest of your code

     // you missed the return statement
     return __find(str, listItems, ++n);
}

Upvotes: 1

Related Questions