Javascript Iterate Through JSON File Levels To Populate Dropdown List
I'mn new to JS and trying to pass values from a JSON file to populate dropdown lists. I've got a JSON file that looks like this: var mydates = { '2018': { 'January': ['we
Solution 1:
The basic idea is to use an onchange event from the selection of a new value to populate the values of the other dropdowns. Below is an example.
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 mydates[year]) {
let opt = document.createElement('option');
opt.innerHTML = month;
monthSelect.appendChild(opt);
}
monthSelect.value = ''; // select the placeholder
clearSelect(weekSelect);
weekSelect.querySelector("option.placeholder").innerHTML = "Select a month first";
weekSelect.value = ''; // select the placeholder
}
function monthChanged(month) {
weekSelect.querySelector("option.placeholder").innerHTML = "Select a week";
clearSelect(weekSelect)
for (const week of mydates[yearSelect.value][month]) {
let opt = document.createElement('option');
opt.innerHTML = week;
weekSelect.appendChild(opt);
}
weekSelect.value = ''; // select the placeholder
}<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>Solution 2:
The following code both initiallizes and listens for event change of any selection excluding the week selection.
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 years = Object.keys(mydates); // years = ['2018', '2019', '2020']
const initalMonths = Object.keys(Object.values(mydates)[0]);
const initialWeeks = mydates[Object.keys(mydates)[0]][initalMonths[0]];
const $yearSelectionOBJ = document.getElementById('selecetedyear');
const $monthSelectionOBJ = document.getElementById('selecetedmonth');
const $weekSelectionOBJ = document.getElementById('selecetedweek');
for (year of years) {
const $optOBJ = document.createElement('option');
$optOBJ.innerHTML = year;
$yearSelectionOBJ.appendChild($optOBJ);
}
for (month of initalMonths) {
const $optOBJ = document.createElement('option');
$optOBJ.innerHTML = month;
$monthSelectionOBJ.appendChild($optOBJ);
}
for (week of initialWeeks) {
const $optOBJ = document.createElement('option');
$optOBJ.innerHTML = week;
$weekSelectionOBJ.appendChild($optOBJ);
}
$yearSelectionOBJ.addEventListener('change', (event) => {
$monthSelectionOBJ.innerHTML = '';
$weekSelectionOBJ.innerHTML = '';
for (month in mydates[event.target.value]) {
const $optOBJ = document.createElement('option');
$optOBJ.innerHTML = month;
$monthSelectionOBJ.appendChild($optOBJ);
}
for (week of mydates[event.target.value][Object.keys(mydates[event.target.value])[0]]) {
const $optOBJ = document.createElement('option');
$optOBJ.innerHTML = week;
$weekSelectionOBJ.appendChild($optOBJ);
}
});
$monthSelectionOBJ.addEventListener('change', (event) => {
$weekSelectionOBJ.innerHTML = '';
for (week of mydates[$yearSelectionOBJ.value][$monthSelectionOBJ.value]) {
const $optOBJ = document.createElement('option');
$optOBJ.innerHTML = week;
$weekSelectionOBJ.appendChild($optOBJ);
}
});
Solution 3:
You can do the following,
var 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"]
}
}
var myyear = document.getElementById('selectedyear');
Object.keys(mydates).forEach(year => {
var yearOpt = document.createElement('option');
yearOpt.innerHTML = year;
myyear.appendChild(yearOpt);
let months = Object.keys(mydates[year]);
var myMonth = document.getElementById('selectedmonth');
months.forEach(month => {
var monthOpt = document.createElement('option');
monthOpt.innerHTML = month;
myMonth.appendChild(monthOpt);
var myWeek = document.getElementById('selectedweek');
mydates[year][month].forEach(week => {
let opt = document.createElement('option');
opt.innerHTML = week;
myweek.appendChild(opt);
});
})
})
Post a Comment for "Javascript Iterate Through JSON File Levels To Populate Dropdown List"