How can I redirect to another page HTML onClick using JSON data

Question

I have DYNAMIC HTML and the data I am getting from my JSON file. I want to redirect to photographers page:

when i click on one of the photographers box:

in the home page, normaly i would use <a href='x'> tag but i'am using Template Literals in JS so I don't know if it is possible to redirect using Template Literals? Any idea of how could i redirect?

MY JSON FILE HERE

This is my code: HOMEPAGE

/////////////////////////////////////////// FETCH //////////////////////////////////////////////

function grabTheDataFromJSON(){
  fetch("./../JSON.json")
    .then(response => response.json())
    .then(dataJson => { 
        displayPhotographers(dataJson); //function is invoked here 
        displayByDefault(dataJson)      //function is invoked here 
    }).catch(error => console.error)
};

grabTheDataFromJSON();

///////////////////////////// DISPLAY PHOTOGRAPHERS BY DEFAULT ///////////////////////////////////

function displayByDefault(dataJson){
  dataJson.photographers.forEach(photographe => { 
      const photographersDiv = document.getElementById('container');
      const div = document.createElement("div");
      const photographerTemplate = `
      <div class="photographerContainer">
        <div id="${photographe.name}">
        <div class="portraitBox">
          <img src="${photographe.portrait}" alt="photo">
        </div>
        <h1 class="name">${photographe.name}</h1>
        </div>
        <p class="city">${photographe.city}, ${photographe.country}</p>
        <p class="tagline">${photographe.tagline}</p>
        <p class="price">${photographe.price}€/jour</p>
        <p class="tags">${photographe.tags.map(tag => `<span class="tag">#${tag}</span>`).join(" ")}</p>  
      </div>
      `  
      photographersDiv.appendChild(div);
      div.innerHTML = photographerTemplate;
  }); 
};

PHOTOGRAPHERS PAGE

/////////////////////////////////////////// FETCH //////////////////////////////////////////////

fetch('./../JSON.json')
    .then((response) => response.json())
    .then(JsonData => {
          photographerProfil(JsonData)// function invoked here          
    }).catch(error => console.error)

/////////////////////////// PHOTOGRAPHER'S PROFIL TEMPLATE ////////://///////////////////////////

function photographerProfil(JsonData){
    const domDiv = document.getElementById('photographer-container'); 
    const profilTemplate = `
      <div class="profil-container">
        <h2>${JsonData.photographers[0].name}</h2>
        <p>${JsonData.photographers[0].city}, ${JsonData.photographers[0].country}</p>
        <p class="tagline">${JsonData.photographers[0].tagline}</p>
        <p>${JsonData.photographers[0].tags.map(tag => `<button class='tags'>#${tag}</button>`).join(" ")}</p>
        <button id="test">Contactez-moi</button>
        <div class="photoBox">
            <img src="${JsonData.photographers[0].portrait}" alt="photo">
        </div>
      </div>
    `
    domDiv.innerHTML = profilTemplate;
    photographerWork(JsonData)  // function invoked here
    showModal();                // function invoked here
}

Answer 1

As far as HTML or JS care, a string is a string. If you get the URL as a string and put it into the template like you did the other strings, it should work fine.

So, like @terrymorse said, something like <a href="${photographer.url}"> should do it.