Kod HTML:
<!DOCTYPE html>
<html lang = "pl">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0, shrink-to-fit = no">
<title>zabawy z JSON</title>
<script src = "ajax.js" defer></script>
</head>
<body>
<button id = "loadButton">Załaduj dane</button>
<p id = "selectedOptionDisplay"></p>
<select id = "optionsList">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</body>
</html>
Kod JS:
let loadButton = document.getElementById("loadButton");
let optionsList = document.getElementById("optionsList");
let selectedOptionDisplay = document.getElementById("selectedOptionDisplay");
loadButton.onclick = function() {
console.clear();
selectedOptionDisplay.textContent = optionsList.value;
let wybor = optionsList.value;
fetch('https://www.serwer.pl/plik.json')
.then(response => response.json())
.then(data => {
//data.A.forEach(element => {console.log(element)});
//data.B.forEach(element => {console.log(element)});
//data.C.forEach(element => {console.log(element)});
data.wybor.forEach(element => {console.log(element)}); // problem
})
};
JSON:
{
"A" : [1, 2, 3, 4, 5],
"B" : [6, 7, 8, 9, 10],
"C" : [11, 12, 13, 14, 15]
}
Treść błędu:
Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined
Na serwerze mam plik JSON, z którego w zależności od wyboru chcę odczytać zestaw danych. Taki pseudo ajax :)
Zmienić podejście, czy jest jakiś sposób na to?