I have built a javascript function to create a project (= picture + title + category)
using an API using fetch. After the response of the API, I modify DOM to display the new list of projects.
Initially, the fetch was going well but now it is executed multiple time without any request.
The first project is created properly (once) but as soon as I create a second project, it is sent twice (2 projects created). If I create an other project after, it is created 3 ou 4 time. Then the next project will be created 6 or 7 time, etc…
I don’t know how to avoid multiple creation of project via fetch.
// ******************************* FONCTION ENREGISTREMENT DU NOUVEAU PROJET *************************************
let errorMessage = document.getElementById("errorMessage");
async function enregistrerProjet(imageInput, titleInput, categoryInput) {
// Création de l'objet FormData
const formData = new FormData();
formData.append("image", imageInput);
formData.append("title", titleInput);
formData.append("category", categoryInput);
try {
// Envoi du projet via API /works
const response = await fetch("http://localhost:5678/api/works", {
method: "POST",
headers: {
"accept": "application/json",
"Authorization": "Bearer " + tokenLogin,
},
body: formData,
})
const responseProjet = await response.json();
if (!response.ok) {
throw new Error(`Une erreur s'est produite lors de l'ajout d'un élément (${response.status}). Veuillez réessayer plus tard.`)
}
projets.push(responseProjet); // ajout du nouveau projet au tableau projets
// Récupération de l'élément du DOM qui accueillera la galerie
const divGallery = document.querySelector(".gallery");
// Création d’une balise dédiée au nouveau projet
const idProjet = document.createElement("figure");
idProjet.id = "portfolioFigure_" + responseProjet.id;
idProjet.dataset.idCategorie = responseProjet.categoryId;
// Création des balises
const imageProjet = document.createElement("img");
imageProjet.src = responseProjet.imageUrl;
imageProjet.alt = responseProjet.title;
const titreProjet = document.createElement("figcaption");
titreProjet.innerText = responseProjet.title;
// Rattachement de la balise projet à la division Gallery
divGallery.appendChild(idProjet);
idProjet.appendChild(imageProjet);
idProjet.appendChild(titreProjet);
// ajout d'une balise image pour affichage projet
idProjet.classList.add("image");
document.getElementById("modifyProject").className = "modal-masque"; // masquage de la modale
document.getElementById("galeriePhoto").className = "modal-wrapper"; // réinitialisation de la div galeriePhoto
masquerModaleAjoutphoto(); // Masquer la modale 2 (Ajout photo)
// Regénération de la galerie des projets
document.querySelector(".gallery").innerHTML = "";
genererProjets(projets);
} catch (error) {
errorMessage.textContent = "Erreur d'envoi du projet."; // vérifier le code erreur *************************
// Attendre un appui clavier
document.addEventListener("keydown", function(event) {
event.preventDefault();
errorMessage.textContent = ""; // Une touche est pressée, efface le message
});
// Attendre un clic de souris
document.addEventListener("click", function(event) {
event.preventDefault();
errorMessage.textContent = ""; // Un click est détecté, efface le message
});
alert(error);
};
};