0

active learner here. I want to retrieve data via an ajax call and then use the returned data inside another function. I've learned that ajax calls are asynchronous so have tried using callbacks to no avail. It looks like calling my main function within my ajax call is the only way to do this? Is this an accurate statement? This post led me to believe that one could simply define the function as a variable, which would then allow you to use the variable as equal to the data returned. This is what I tried in my code snippets below. The console log in my getChoiceControl function is working but I get an 'undefined' for the console log of the variable set to this function. I'm really trying to understand async calls and how to consume data, assuming this issue is related to async behavior. I've read many articles on in, but due to the fact that callbacks also failed when I tried that I'm wondering if there is simply some other gap in my limited knowledge. Thanks in advance!

function createHTML(data){
var tester = getChoiceControls();
console.log(tester);
var arr = data.d.results;
var container = $('.container');
var categoryLinksContainer = $('<div class="wrapTest" />');
    for(var i in arr){
        var item = arr[i];
        var title = item.Title;     
        categoryLinksContainer.append(
            '<div class="test">'+title+'</div>'     
        );
    }               
    categoryLinksContainer.appendTo(container);         

}

function getChoiceControls(){
    $.ajax({
        url: _spPageContextInfo.siteServerRelativeUrl+"/_api/web/lists/GetByTitle('TestList')/fields?$filter=(Title eq 'TestColumn')",
        type: "GET",
        headers: {
        "accept": "application/json;odata=verbose",
        },
        success: function (data) {
        console.log(data);
        return data;
        },
        error: function (error) {
        console.log(JSON.stringify(error));
        }
    });
}
loady toad
  • 53
  • 7
  • 1
    Well, you sure are mixing some concepts there... Let me try to help you: In JS, a function is treated like any other data, and thus, can be assigned to a variable; That's - for instance - what you do when you assign a function to the "success" attribute of the object you're passing as a parameter to the $.ajax call. – Marcelo Myara Aug 30 '18 at 20:33
  • `this Post` does not deal with async code. – Jonas Wilms Aug 30 '18 at 20:34
  • 1
    So, whatever is assigned to the "success" attribute of that object (see the `{` and `}` around the $.ajax call? That is defining an object) will be used (called, executed) as soon as the assync returns (with success). So, you can assign a previously defined function or you can define a new one directly on the "success" atribute definition (like you're doing in your code). – Marcelo Myara Aug 30 '18 at 20:36
  • Whenever you access var tester, you don't know whether the data has actually been already returned by your ajax call. This has been answered here: https://stackoverflow.com/questions/17015409/assigning-variable-from-jquery-ajax-call-returns-undefined – NoelB Aug 30 '18 at 20:37
  • 1
    In your code, if you want "createHTML" function to be called directly by the assync return (successfull one), you can just assign it on the success attribute definition (like `var createHTML = function(data) { /*(...)*/ }` to define the function an assign it to a variable, and then `(...) success: createHtml, (...)` when defining the parameter object to $.ajax call. (do not include a "()" after the "createHTML" though! this will assign the function itself and not the return of the function). – Marcelo Myara Aug 30 '18 at 20:40
  • 1
    Oh, and just one more thing: In your code's 3rd line, you're testing the "data" excpecting it to be containing the result of the $.ajax. This is wrong, since the 3rd line will execute immediatly after the 2nd line (and the assync call will take time to return and execute - well - assynchronously). – Marcelo Myara Aug 30 '18 at 20:43
  • 2
    "*alling my main function within my ajax call is the only way to do this?*" - Yes. "*believe that one could simply define the function as a variable, which would then allow you to use the variable as equal to the data returned*" - except that you **cannot** `return` data that is asynchronously retrieved – Bergi Aug 30 '18 at 20:55

0 Answers0