Use retrieved data from an ajax request that exists in another file, then use in a local function

Question

Really hoping someone can point in me in the right direction or tell me what I'm doing wrong. Sorry if my explanation isn't great, be kind!

Currently I'm working on creating a function which runs an ajax call, with a dynamically created URL. The function needs to sit in a centralised single spot (e.g. website.com/global-api.js). Ideally, any of our developers should be able to make a call to the function from within their sites (website.com/mysite.html) with the dataset they're wanting to retrieve as an argument, and then alter it as required (I've included a vague diagram which was created to describe the requirement – might not be useful).

global-api.js

function globalApi(value){
    var setApiProp = {
        settings: { name: value },
        init: function(){ 'use strict';
            s=this.settings;
            this.getApiData(s.name);
        },
        getApiData: function(attr){
            path = '/api/'+attr;
            console.log('Get from: ' + path)

            var jqxhr = $.ajax({
                url: path,
                method: "GET",
                dataType: "json",
                async: false
            })
            .done(function(responseData){
                console.log('Response is: ' + responseData)
                // Log: Response is: [object Object],[object Object]..
                return responseData
            })
        }
    }; //end
    setApiProp.init()
}

unitone.js

Inside a dom content loaded event:

var retrievedData = globalApi("news/")
console.log('Retrieved is: ' + retrievedData)
developersFunction(retrievedData);

The call from unitone.js generates the correct path and gets the correct data in globalApi. However, my log is currently;

Response is: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Retrieved is: undefined
Developer function data is: undefined

My question is; Is there a reliable way to make the developersFunction wait until retrievedData is set, so that it can be used in local functions?

Diagram of requirement: Unit files to call function from central location

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Patrick Hund, Sep 26 '18 at 06:19
This is a classic mistake: your data is being fetched asynchronously, but you expect it to be available immediately after invoking your function. Also, the *globalApi* function does not return anything (there is no return statement). Please take a look at the duplicate question I've posted. — Patrick Hund, Sep 26 '18 at 06:20
Thanks Patrick, I'd read so many questions I didn't even find that one but you're right it's very similar and helpful. — mia, Sep 27 '18 at 00:13

score 1 · Accepted Answer · answered Sep 26 '18 at 06:23

What you need to do is pass a callback function to the gloablAPI function, something like below:

function globalApi(value, callBack)

The one who calls this function will pass a function, in your case you can pass developersFunction:

globalApi("news/", developersFunction)

Now in side your globalAPI function when the response is retrieved you need to call this function:

.done(function(responseData){
                console.log('Response is: ' + responseData)
                // Log: Response is: [object Object],[object Object]..
                callBack(response);
  })

This way your function will execute only after the response has come from the API.

Thank you so much for being so helpful! That works perfectly – I didn't even think to use a call back. I really appreciate it! — mia, Sep 27 '18 at 00:10

Use retrieved data from an ajax request that exists in another file, then use in a local function

1 Answers1