My goal is to create a webpage that displays a family tree using JSON data. I am utilizing the uploadJSON() function to save the JSON data from a file into the global variable tree. Everything seems to be working fine until I try to access tree in another function. When I use console.log(tree); inside addToDropDown(), it displays as undefined in the console. I attempted setting tree to a default value of "Testing" upon initialization, but it remains unchanged when I call uploadJSON().
let tree;
let dropDown;
window.onload = function() {
// Upload JSON File
document.getElementById('upload-button').onclick = function() { uploadJSON(); };
// Get Dropdown
dropDown = document.getElementById('family-member-select');
}
function uploadJSON() {
let files = document.getElementById('upload-file').files;
if (files.length <= 0) {
return false;
}
let fr = new FileReader();
fr.onload = function(e) {
console.log(e);
let result = JSON.parse(e.target.result);
tree = result;
console.log(tree); // This correctly outputs the tree object from the JSON file
}
fr.readAsText(files.item(0));
addToDropdown();
}
function addToDropdown() {
// Populate dropdown list with family members
console.log(tree);
}