Test to parse JSON content into variable for Highcharts

by ssoj_tellig

HTML

<html>
<head></head>
<body>
    <select id="year" onchange="yearChanged(this.value)">
        <option class="placeholder" value="" disabled selected>Select a year</option>
    </select>
    <select id="month" onchange="monthChanged(this.value)">
        <option class="placeholder" value="" disabled selected>Select a year first</option>
    </select>
    <select id="week">
        <option class="placeholder" value="" disabled selected>Select a month first</option>
    </select>
</body>
</html>

JavaScript

// CODE THAT DOES NOT WORK:
// I'm trying to fetch the json content from a local file
// the data is printed correctly in the console, but then in the for loop, the variable mydates is 'undefined'

// test to pass json content to var mydates:
var mydata;    
fetch("{% static 'dates.json' %}")
.then(function(u){return u.json();})
.then(function(json){mydata = json; console.log(mydata)})
// test to see if mydates is correctly initialized, this should print in the console: 2018, 2019, 2020 ... not working
for (let year in mydata){                  
    console.log(year)
}

// CODE THAT WORKS:
// The code below works fine if I hard code the json content in const mydates
// But how to pass the year, month and week selection to a string variable that willbe used to call the chart ?

const mydates = {
    "2018": {
        "January": ["week1","week2","week3","week4"],
        "February": ["week5","week6","week7"],
        "March": ["week8","week9","week11"]
    },
    "2019": {
        "January": ["week1","week2","week3","week4"],
        "February": ["week5","week6","week7"],
        "March": ["week8","week10","week11"]
    },
    "2020": {
        "January": ["week1","week2","week3","week4"],
        "February": ["week5","week6","week7"],
        "March": ["week8"]
    }
};

const yearSelect = document.getElementById("year");
for (let year in mydates) {
    let opt = document.createElement('option');
    opt.innerHTML = year;
    yearSelect.appendChild(opt);
}

const monthSelect = document.getElementById("month");
const weekSelect = document.getElementById("week");

// delete all options besides the placholder
function clearSelect(select) {
    select.querySelectorAll("option:not(.placeholder)").forEach(elem => {
        select.removeChild(elem);
    });
}

function yearChanged(year) {
    monthSelect.querySelector("option.placeholder").innerHTML = "Select a month";
    clearSelect(monthSelect);
    // add options for the given year
    for (let month in...