Generating blog posts with html redirect via json backing file

I follow this tutorial ( https://www.youtube.com/watch?v=TlP5WIxVirU ) for using a search bar on my new blog and i apply the youtuber's advice and use his system of storing all my articles data into a json file.

All work perfectly but i tried to add a json variable into the href of my articles, knowing that each of the href will be different, and it is impossible for me to make it work.

I tried a whole bunch of solutions found on the internet but it was impossible for me to redirect to each of the different article pages using the generation method via template.

The only way for me to achieve a redirect is to use this but the redirect only works on the first post :

<script>
   var scrt_var = 10;
   document.getElementById("link").setAttribute("href",scrt_var);
</script>
<a id="link"></a>

HMTL

<div  data-articles-container>
    <template articles-template>
        <a href="">
            <div >
                <img  data-imagearticle>
                <div >
                    <p  data-tag></p>
                </div>
                <p  data-titre></p>
                <p  data-description></p>
                <div >
                    <img  data-imageauteur>
                    <div >
                        <p  data-auteur></p>
                        <p  data-datearticle></p>
                    </div>
                </div>
            </div>
        </a>
    </template>
</div>

const articlesTemplate = document.querySelector("[articles-template]")
const articlesContainer = document.querySelector("[data-articles-container]")
const searchInput = document.querySelector("[data-search]")

let articles = []

searchInput.addEventListener("input", e => {
  const value = e.target.value.toLowerCase()
  articles.forEach(article => {
    const isVisible =
        article.name.toLowerCase().includes(value) ||
        article.email.toLowerCase().includes(value)
        article.element.classList.toggle("hide", !isVisible)
  })
})

fetch("article.json")
    .then(res => res.json())
    .then(data => {
        articles = data.map(article => {
            const card = articlesTemplate.content.cloneNode(true).children[0]
            const tag = card.querySelector("[data-tag]")
            const titre = card.querySelector("[data-titre]")
            const description = card.querySelector("[data-description]")
            const auteur = card.querySelector("[data-auteur]")
            const datearticle = card.querySelector("[data-datearticle]")
            tag.textContent = article.tag
            titre.textContent = article.titre
            description.textContent = article.description
            auteur.textContent = article.auteur
            datearticle.textContent = article.datearticle
            articlesContainer.append(card)

            const imagearticlesrc = card.querySelector("[data-imagearticle]")
            imagearticlesrc.src = article.image;

            const imageauteursrc = card.querySelector("[data-imageauteur]")
            imageauteursrc.src = article.auteurimage;

            return { image: article.image, tag: article.tag, titre: article.titre, description: article.description, auteurimage: article.auteurimage, auteur: article.auteur, datearticle: article.datearticle, element: card }
        })
  })

JSON

[
    {
      "id": 1,
      "image": "assets/image/articles/article1.jpg",
      "tag": "Healthy",
      "titre": "Titre de l'article article article article article",
      "description": "Description description description description description descript ...",
      "auteurimage": "assets/image/auteur.jpg",
      "auteur": "Yftix",
      "datearticle": "27/09/2030",
      "pagearticle": "articles/article-banane.html"
    },
    {
      "id": 2,
      "image": "assets/image/articles/article1.jpg",
      "tag": "Healthy",
      "titre": "Titre de l'article article article article article",
      "description": "Description description description description description descript ...",
      "auteurimage": "assets/image/auteur.jpg",
      "auteur": "Yftix",
      "datearticle": "27/09/2030",
      "pagearticle": "articles/article-banane.html"
    }
  ]

Result

Result on website

CodePudding user response：

After struggling for two days, I spoke with a guy on a discord community server and he advised me to try and it work :

pagearticle.href = article.pagearticle