Seeking assistance in navigating me towards the right path or identifying my errors. Pardon if my explanation is unclear, please be gentle!
Currently, I am engaged in developing a function that executes an ajax call with a dynamically generated URL. The objective is to place this function at a centralized location (e.g., website.com/global-api.js). Our aim is for any developer to access this function from their respective sites (website.com/mysite.html), passing the dataset they wish to retrieve as an argument and modifying it as needed. I have included a rough diagram depicting this requirement, although its usefulness may be limited.
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)
return responseData
})
}
}; //end
setApiProp.init()
}
unitone.js
Within a DOM content loaded event:
var retrievedData = globalApi("news/")
console.log('Retrieved is: ' + retrievedData)
developersFunction(retrievedData);
The invocation from unitone.js successfully generates the correct path and retrieves the accurate data in globalApi. However, my current logs display;
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 query pertains to a reliable method of ensuring developersFunction waits until retrievedData is assigned before utilizing it in local functions?
Diagram illustrating the requirement: Unit files accessing function from central location