First of all, I would like to apologize for the complicated style of my question. I am developing a website for a friend who runs a local bus company.

Several trips (4-5 pieces) are made a year to different destinations. These change every year. I have a .JSON file in which I store the different destinations as objects in an array, making it easy to adjust yearly.

On the start page "cards" are displayed which generate the content and themselves via xhttp request (javascript). Now I want to create another .html page, which after clicking a map (e.g. Munich) pulls the .JSON data and feeds the overview page with it.

I have both the cards and the overview page. However, after hours of thinking and trying, I don't see a way to adapt the link so that it displays the data of the corresponding destination on the overview page. I can only adjust this if I manually enter e.g. ${data[2].heading}.

Example code for the cards:

//XML-Request
const mainContainer = document.querySelector(".main_container");
var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200){
        var response = JSON.parse(xhttp.responseText);
        var data = response.cities;

        for(i=0; i<data.length;i++){

            var card = document.createElement("div");
            card.className = `karte`;

            let cardContent = `<h1>Urlaub in ${data[i].name} </h1>
            <button class="btn ${data[i].id}" onclick="openWindow()">Ab nach ${data[i].name}</h1>`

            card.innerHTML = cardContent;
            mainContainer.appendChild(card);
        }

    }
}

xhttp.open("GET", "data.json", true);
xhttp.send();strong text

Is there any way to customize the links accordingly? Happy to learn PHP or similar if it solves my problem... just need some food for thought on how to approach it for now.

Thank you in advance.