Html Question posted in
Some basic documentation can be found here.

How to use a url from json file as link for a button html using javascript

I’m almost at the end of a thing I like to make for my website.
I have a json file that I use as a sort of database for my thumbails for the recipes…
The most info displays as I would like (thanks to this forum by the way)
See the print screen.
enter image description here

The button that says ‘MAKE IT YOURSELF’ shoud use the link (url) from the json file, here a little peace of the json file…

[
  {
    "postid": "3",
    "title": "Pizza",
    "text": "some text to explain the recept in short",
    "img": "../assets/images/recipes-thumbnail/pizza.png",
    "ingredients": "flour, yeast, water, salt, honey, olive oil",
    "url": "../pages/pizza.html"
  }
]

This is the html

  <!--  Card  -->
  <div class="user-cards" data-post-cards-container data-aos="zoom-in" data-aos-delay="100"></div>

  <template data-post-template>
    <div id="card-container" class="container">
      <div class="card">
        <div class="card-image_2">
          <div class="photo" data-photo></div>
        </div>

        <div class="card-data">
          <h3 class="header" data-header></h3>
          <p class="body" data-body></p>
          <p class="ingre" data-ingre></p>

          <!-- This is the button now -->
          <a href="#" class="card-button" data-link>Make it yourself</a>

        </div>
      </div>
    </div>
  </template>
  <!--  End Card  -->

This is the javascript part, this is the code that works fine for the moment

I don’t now how to adapt it for the link

fetch("../jsn/posts-main.json")
  .then(res => res.json())
  .then(data => {
    posts = data.map(post => {
      const card = postCardTemplate.content.cloneNode(true).children[0]
      const header = card.querySelector("[data-header]")
      const body = card.querySelector("[data-body]")
      const ingre = card.querySelector("[data-ingre]")
      const img = card.querySelector("[data-photo]")

      header.textContent = post.title
      body.textContent = post.text
      ingre.textContent = post.ingredients

      const imgContent = document.createElement('img');
      imgContent.src = post.img;
      img.appendChild(imgContent);

      postCardContainer.append(card)
      return {
        title: post.title,
        ingre: post.ingredients,
        element: card
      }
    })
})

Sorry for the long post, I thank you guys already

I tried to search on google and forums, but can’t find exactly what i need

Tags:

3

Answers


  1. 0

    The plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute.

    If necessary, set CSS display: inline; on the form to keep it in the flow with the surrounding text. Instead of <input type="submit"> in above example, you can also use <button type="submit">. The only difference is that the <button> element allows children.

    Login or Signup to reply.
  2. 0

    Just set the href of the link to the URL from the JSON:

    const link = card.querySelector("[data-link]");
link.href = post.url;
    Login or Signup to reply.
  3. 0

    You can adapt your JavaScript code to update the button link <a href="#">Make it yourself</a> using the url from the JSON file by modifying the part where you map the data to the card. Specifically, you need to select the anchor tag with data-link and set its href attribute to the url from your JSON file.

    fetch("../jsn/posts-main.json")
  .then(res => res.json())
  .then(data => {
    posts = data.map(post => {
      const card = postCardTemplate.content.cloneNode(true).children[0]
      const header = card.querySelector("[data-header]")
      const body = card.querySelector("[data-body]")
      const ingre = card.querySelector("[data-ingre]")
      const img = card.querySelector("[data-photo]")
      const link = card.querySelector("[data-link]") // Select the button link

      header.textContent = post.title
      body.textContent = post.text
      ingre.textContent = post.ingredients

      const imgContent = document.createElement('img');
      imgContent.src = post.img;
      img.appendChild(imgContent);

      // Set the href attribute of the link
      link.href = post.url

      // Append the card to the container
      postCardContainer.append(card)

      return {
        title: post.title,
        ingre: post.ingredients,
        element: card
      }
    })
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search