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.
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
Just set the href of the link to the URL from the JSON:
const link = card.querySelector("[data-link]");
link.href = post.url;
1
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
}
})
})
1