odczyt pliku JSON w zależności od wybranej w formularzu opcji

0

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?

0

Wychodzi na to, że zmiennej wybor w ten sposób nie mogę użyć.

Warto natomiast wiedzieć, jak odczytać treść oraz id wybranej opcji:
https://stackoverflow.com/questions/43644665/javascript-how-to-get-the-id-of-selected-item

console.log(optionsList.options[optionsList.selectedIndex].value);
console.log(optionsList.options[optionsList.selectedIndex].index);

Tak w ogóle czy to można nazwać ajaxem? Bo działa: w zależności od wybranej opcji w dropdownbox, odczytywana i wyświetlana jest inna treść z JSONa.

1 użytkowników online, w tym zalogowanych: 0, gości: 1