I’m trying to populate a select with data from a .json file, and getting an error (as seen in browser dev counsel):
GET http://[my.local.i.p.]:8000/auto_data.json 404 (Not Found)
The .json file is located, for now in localhost, in the same directory level as the webpage & javascript calling it.
The JS:
let autoYearsSelect = document.querySelector("auto_years-1"); //Carousel with more than 1 slide.
//AJAX request - Get the list of States and Years
fetch ("auto_data.json")
.then (function(response) {
return response.json();
})
.then (function(data) {
let years = data [autos];
let out = "";
out += '<option value="">Choose a Year</option>';
for (let year of years) {
out += '<option value="${year}">${year}</option>';
}
autoYearsSelect .innerHTML = out;
A snippet of what the json file holds:
{
“BMW”: [“1980”,“1981”,“1982”,“1983”],
“Chevy”: [“1970”,“1978”,“1979”,“1981”,“1985”,“1987”,“1990-95”],
“Honda”: [“1966”,“1967”,“1969”,“1972”,“1974”,“1976”,“1980”,“1982”],
}
There are two select dropdowns. For example:
Cars - which has options: “-Select A Car Brand-”, “BMW”, “Chevy”, “Honda”
Years - which is initially empty but should be populated with the years data based on the json file.
So, for example, if the user selects “BMW” in the 1st select, then the 2nd existing select (w/no options initially) next to it should get populated with options “1980”,“1981”,“1982”,“1983”.
If the user subsequently chooses “Chevy”, then those years should be the only options in the 2nd, or Years, select dropdown.
If the user goes back to the first select Cars and choose the default -Select A Car Brand-, the Years select should be emptied of options but still on the form.
Thoughts on why the 404 error?
