如何使用JSON数据重定向到另一个页面HTML

Question

我有动态HTML和从JSON文件中获得的数据。我想重定向到摄影师页面：

​

​

当我点击其中一个摄影师框时：

​

​

在主页中，通常我会使用<a href='x'>标记，但我在JS中使用模板文字，所以我不知道是否可以使用模板文字进行重定向？你知道我怎么重定向吗？

我的JSON文件HERE

这是我的代码:主页

/////////////////////////////////////////// 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;
  }); 
};

摄影师页面

/////////////////////////////////////////// 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

就HTML或JS而言，字符串就是字符串。如果您以字符串的形式获取URL并将其放入模板中，就像处理其他字符串一样，它应该工作得很好。

所以，就像@terrymorse所说的，像<a href="${photographer.url}">这样的东西应该这样做。