Problems with return value of ajax call - ajax

Question

I have problems with an ajax call and I think the return value is not returned properly.
I have a index.html page which loads 2 javascript files:
index.js : For dynamic GUI stuff on index.html
application.js : Makes an ajax call (uses Javascript module pattern)
index.js
$(document).ready(function() {
console.log(ApplicationModule.getEventById(123)); // undefined if I use return result[0];
})
application.js
var ApplicationModule = (function () {
// return "foo"; this works in index.html ("foo")
function getEventById(id) {
// ajax call returns a json object (list of {"title":"<the title>"} objects)
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
url: "/api/v1/eventtool/" + id,
success: function (result) {
console.log(result[0]); // works fine -> {"title":"my title"}
return result[0]; // does not work in index.html (undefined)
}
});
}
return {
getEventById : getEventById
};
})(ApplicationModule || {});
If I uncomment the line [ return "foo" ], everything works as expected and I see "foo" at the console.
If I comment this line to execute the ajax call I get "undefined". Why?
Is there something wrong with my ajax call?

Answer 1

returning the value doesn't work, you should specify an element with DOM, like this: $("#el").html(result[0]);

Answer 2

my final solution using fetch and promises:
application.js
function getEventById(id) {
return fetch(myurl)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
return myJson[0];
});
}
index.html
const check_event = ApplicationModule.getEventById(123);
// console.log(check_event); // Promise {<pending>}
// [[PromiseStatus]] "resolved"
// [[PromiseValue]] {"title":"my title"}
check_event.then(function(data) {
console.log(JSON.stringify(data)); // {"title":"my title"}
});