An object fails to be updated inside an Ajax callback Function

Question

I have a top level function (let’s call it function Big) that contains an object variable (lets call it detail), an array of data and a function that will make an Ajax call (lets call it function callApi). So I pass the detail as an argument to the callApi function. As the callApi is an ajax call, the intention is to modify the object variable (detail) inside the success callback of the ajax function, so that the data property of the object detail['data'] = data

The thing is after the entire function runs, the detail object variable is not updated with the success callback function from the callApi (the function that contains code for making the ajax call) and the data array never changes. They both remain empty even when the API is successfully called.

const Big = ()=>{
//object variable
let detail = {}
//the array that will hold data object should be populated with
let data = [];

//function containing the ajax call
const callApi = x=>{
$.ajax({
/*
--------
--------
*/
success: function (result) {
      if (result.status.name == "ok") {
        for (let i = 0; i < result.length; i++) {
          data.push({
            title: result.data.results[i].title,
            link: result.data.result[i].link,
            description: result.data.result[i].description,
            image_url: result.data.result[i].image_url,
          });
        }
      }
 //i expect the data array to already be populated, and then used to form the data property of the argument
x.data = data   
}
})
}


//heres where i actually run the function with the detail argument
callApi(detail)
// logging detail here shows it still remains as an empty object. Even the data remain as an empty array
console.log(detail)
}