How do I define assign the results of an ajax call to an object property using defineProperty?

Question

I am trying to assign the results of an ajax call to an object property that I created using the JavaScript defineProperty method.

var myArray = getArrayOfListsForObjects(); //returns an array of list names
var myBook = {};

//below defining a property of the book object using the name of
//the first list in the array myArray, and then try to set the value
//using an AJAX call
Object.defineProperty(TheBook,myArray[1].list,{
    value:clientContext.executeQueryAsync(getDetails(myArray[1],_onQueryFailed)),
    writable:true,
    enumerable:true,
    configurable:true
});

My function to get the list data:

function getDetails(listItem){
    var baseURL = SP.PageContextInfo.get_webServerRelativeUrl() + "/_vti_bin/listdata.svc/" + listItem.list +
    "?$select=" + listItem.codeDigits + "," + listItem.codeDescription + "," + listItem.ItemStatus + "&$orderby=" + listItem.codeDescription + "&$filter="+listItem.ItemStatus+" eq true" + "&$inlinecount=allpages";

    $.ajax({
        url: baseURL,
        type: "GET",
        headers:{
          "accept":"application/json;odata=verbose",
        } 
    })
    .done(function(results){
        return results;
    })
}

I know that I am getting the correct results, but I'm not sure how I can assign them to object property. I've read enough to know that it has to do with the asynchronous nature or AJAX and that the script keeps loading even though all the results haven't been returned. I'm guessing I need some callback, but, unable to get my head around it at this time. Any help would be appreciated.

Answer 1

Are you using a decent IDE checking for errors?
It looks like you are passing _QueryFailed as parameter to your getDetails function and have mismatching variable names.

Half your code is missing so I can only take a stab..

var myArray = getArrayOfListsForObjects(); //returns an array of list names
var myBook = {};
clientContext.executeQueryAsync(
       getDetails.bind(myArray[1]) //bind correct scope so it is passed to async function 
    , _onQueryFailed
);
function getDetails() {
    var listitem = this;//bound scope
    var baseURL = SP.PageContextInfo.get_webServerRelativeUrl()
        + "/_vti_bin/listdata.svc/"
        + listItem.list
        + "?$select=" + listItem.codeDigits
        + "," + listItem.codeDescription
        + "," + listItem.ItemStatus
        + "&$orderby=" + listItem.codeDescription
        + "&$filter=" + listItem.ItemStatus + " eq true"
        + "&$inlinecount=allpages";

    $.ajax({
        url: baseURL,
        type: "GET",
        headers: {
            "accept": "application/json;odata=verbose"
        }
    }).done(function (results) {
        Object.defineProperty(
            myBook
            , results.codeDigits
            , {
                value: results,
                writable: true,
                enumerable: true,
                configurable: true
            });
    })
}

Answer 2

You can make your ajax call synchronous by using async: false. But that is not good practice to follow.

Async:False = Codes paused. (Other codes are waiting for this to finish..)

Other than async:false, you can think of callbacks rather that returning from success function which would be optimized way of doing your solution.

For example:

function findPrice(productId, storeId, callback) {
jQuery.ajax({
    url: "/includes/unit.jsp?" + params,
    cache: false,
    dataType: "html",
    success: function(html) {
        callback(productId, storeId, html);
    }
});
}
function receivePrice(productId, storeId, html) {
alert("Product " + productId + " for storeId " + storeId + " received HTML " + html);
}
findPrice(23, 334, receive_price);