Tengo este codigo donde leo un archivo datos.json y cargo las opciones del select, ahora lo que quiero es que a partir de la opcion que seleccione, mostrar una tabla con datos de otro archivo datostabla.json
<option value="AB">Alberta</option>
<select id="locality-dropdown" name="locality"></select>
<script>
let dropdown = document.getElementById('locality-dropdown');
dropdown.length = 0;
let defaultOption = document.createElement('option');
defaultOption.text = 'Choose State/Province';
dropdown.add(defaultOption);
dropdown.selectedIndex = 0;
const url = 'datos.json';
fetch(url)
.then(
function(response) {
if (response.status !== 200) {
console.warn('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
let option;
for (let i = 0; i < data.length; i++) {
option = document.createElement('option');
option.text = data[i].name;
option.value = data[i].abbreviation;
dropdown.add(option);
}
});
}
)
.catch(function(err) {
console.error('Fetch Error -', err);
});
</script>
Aqui les dejo parte del archivo datos.json
[
{
"name": "New Brunswick",
"abbreviation": "NB"
},
{
"name": "Newfoundland and Labrador",
"abbreviation": "NL"
},
{
"name": "Nova Scotia",
"abbreviation": "NS"
},
{
"name": "Yukon",
"abbreviation": "YT"
}
]
en esta parte les añado la parte del archivo datostabla.json para que lo revisen porfavor
[
{
"nombre": "Alberta",
"abreviacion": "AB"
},
{
"nombre": "Yukon",
"abreviacion": "YT"
}
]
Espero de su ayuda ya que no se como hacerlo, soy nuevo en esto de javascript, de antemano muchas gracias.