Whenever you want to use the data retrieved from ajax, you must use it in the callback function which is triggered when the ajax call receives the response.? This is a common practice.

?

But if the ajax call to retrieve data resides in a common function, it would be a little more complicated. Below I give an example to explain this.

?

function DataUtil(callBack) {
	var me = this;
	$.ajax({
		url : "../json/test.json",
		success : function(data) {
			me.data = $.parseJSON(data);
			callBack(me);
		}
	});

	// can only be used in the callBack
	me.getName = function() {
		return me.data.name;
	};

	// can only be used in the callBack
	me.getDescription = function() {
		return me.data.description;
	};
}

function displayRetrievedData() {
	var dataRetrieved = {};
	var callBack = function(dataUtil) {
		dataRetrieved.name = dataUtil.getName();
		dataRetrieved.description = dataUtil.getDescription();
		console.log("in the call back:");
		console.log(dataRetrieved);// gets the correct data from the json
	};
	DataUtil(callBack);
	console.log("out the call back:");
	console.log(dataRetrieved);// not sure it gets the data from the json. It
								// depends the ajax call speed
}

function canNotGetCorrectData() {
	var dataRetrieved = {};
	var dataUtil = new DataUtil(function() {
	});
	dataRetrieved.name = dataUtil.getName();// not sure the data is ready
	dataRetrieved.description = dataUtil.getDescription();// not sure the data is ready
	console.log("Can not get the data:");
	console.log(dataRetrieved);
}

displayRetrievedData();
canNotGetCorrectData();

?

?