I have had a look at the following questions, with negative results:
- I'm not quite understanding this asynchronous nature
- Javascript asynchronous nature
- Why is the object not being updated
My question was labeled as being a duplicate of, or having answers in, this, but it's absolutely not because the same issue is seen in Firefox - not a webkit issue.
The short version is that I thought to define all my JS functions in one file, and essentially use all my calls and eventlisteners in another file, loaded at the end and encapsulated in a .ready()
function.
Let's say that in file_01.js, I have a this function:
function load_some_data() {
let results_json = {};
let query_string_objects = {
this_thing: "query_string_one...",
that_thing: "query_string_two...",
the_other_thing: "query_string_three...",
}
for (let some_thing in query_string_objects) {
$.ajax({
method: "GET",
data: query_string_objects[some_thing],
url: "./query_processor.php",
success: get_results,
});
function get_results(results) {
results_json[some_thing] = (JSON.parse(results));
}
}
console.log('Within load_some_data: ');
console.log(results_json);
return results_json;
}
then in file_02.js, let's say I have this:
$( document ).ready(function() {
let stored_data = load_some_data();
console.log('After function call and assignment: ');
console.log(stored_data);
console.log(stored_data.this_thing);
});
And the output/access is confusing to me. I understand clearly why the console statements appear how they do: inside the function rendering first then after from the file_02 console.log statement. But why are the JSON objects empty until I click to expand the object and then there comes that statement: 'This value was evaluated....'?
I am including the phenomenon in Firefox as well. Additionally I have tested the syntax of the console.log(stored_data.this_thing);
, with console.log(stored_data[this_thing]);
and console.log(stored_data['this_thing']);
with the same result.
The error below the console outputs, seen/experienced is unrelated - it's a ChartJs config thing I am getting wrong.