How to access JSON data from a HTML <select> Tag?

JavaScript
1

Since you guys were so amazing at giving me advice earlier today, I have one more question, which is hopefully a bit more simple.
Okay, so I have read w3schools’ tutorial on how to make a dynamic HTML table that can show selected JSON data, using a dropdown menu. What I want to do is similar, but a bit different.
This is the tutorial I am talking about: https://www.w3schools.com/js/tryit.asp?filename=tryjson_html_table_dynamic

Okay, so I made a JSON file that contains a train number, a destination and a departure time. I succesfully managed to fetch this data and getting it to show on my page using a button.

document.getElementById('getTrains').addEventListener
('click', getTrains);

function getTrains(){
    fetch('js/timetable.json')
    .then((res) => res.json())
    .then((data) => {
        let output = '<h2>Trains</h2>';
        data.forEach(function(trains){
            output += `
            <ul>
            <li>train: ${trains.train}</li>
            <li>direction: ${trains.direction}</li>
            <li>departure: ${trains.departure}</li>
            </ul>
            `;
        });
        document.getElementById('output').innerHTML = output;
    })
}

Okay, so in my html I made a dropdown with a list of station names

                <select id="myselect">
                        <option value="">pick station:</option>
                        <option value="#">Station 1</option>
                        <option value="#">Station 2</option>
                        <option value="#">Station 3</option>
                        <option value="#">Station 4</option>
                        <option value="#">Station 5</option>
                        <option value="#">Station 6</option>
                </select>

Here is what I want to do: I want to be able to click on ‘Station 1’, which will then open up a pop-up window that contains the JSON data.
Any idea how I can make this work? I can’t give each option value an ID, so I am not sure what to do, Also the w3schools tutorial only showed how to make tables appear on the same page. What I want is a pop-up page, where I can style the output.

Also, BONUS QUESTION:
Each station will of course have a different set of departure times. Do I need to make a new JSON file for each station, or is there a way to seperate the data inside one JSON file?

I hope I made it clear enough =)

4

I tried adding one and referring to it in my JS script without much luck.

<option value="1" id="station1">Station 1</option>

document.getElementById('station1').addEventListener
('click');
6

I put it in the same place as it was in my first script (the one that did work)

document.getElementById('station1').addEventListener
('click');

function station1(){
    fetch('js/timetable.json')
    .then((res) => res.json())
    .then((data) => {
        let output = '<h2>Trains</h2>';
        data.forEach(function(trains){
            output += `
            <ul>
            <li>train: ${trains.train}</li>
            <li>direction: ${trains.direction}</li>
            <li>departure: ${trains.departure}</li>
            </ul>
            `;
        });
        document.getElementById('output').innerHTML = output;
    })
}
8

When I click on the option value with the ID of “station1” in the dropdown list, I want the data from the JSON file to show, just like when you push a button with an ID.
The end goal is also to make a popup window, so that when I click on the ID, a popup will appear with the data in it. But I have not gotten that far.

10

Rather than use an id, could you not just make the value be the same as the option text? As long as those are unique, you should be good to go. Then the click handler should be able to get the value of the element.

By default, if you don’t supply value it uses the text of the <option> already.

Also, I wonder if you could just have one handler set on the <select> element instead of one for each option?

An example of using one handler instead of a bunch of click handlers: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

12

I got it to work by myself.
I just used Bootstrap Modals to store the output data, and I just used seperate json files. It worked perfectly.