Can't delete work from an API - javascript

JavaScript
1

I can’t delete a work from an API. According to the swagger, you have to use the ID to delete the work. I wrote the code but it does not work I have an error message in the console 401. Here is the github link to see eventually all the code in adminscript.js : https://github.com/mjandia/Portfolio-architecte-sophie-bluel

If you have a solution or if you see an issue in my code, thanks for your help.

Here is the swagger infos :

DELETE /works/{id} Delete a work depending on id

Parameters
Try it out
Name    Description
id *
integer($int64)
(path)
id of work to be deleted 1

Here is the javascript code :

/* Load data from API to admin.html page */
const gallery = document.querySelector(".gallery");
const portfolio = document.getElementById("#portfolio");

fetch("http://localhost:5678/api/works")
    .then(response => {
        if (response.ok) {
            return response.json();
        }
        else {
            throw new Error('Il y a une erreur');
        }
    })
    .then(works => {
        for (let i = 0; i < works.length; i++) {
            let work = works[i];
            let div = document.createElement("div");
            div.innerHTML = work.title;
            div.setAttribute("data-id", work.id);
            div.setAttribute("data-user-id", work.userId);
            gallery.appendChild(div);
            let img = document.createElement("img");
            img.src = work.imageUrl;
            div.appendChild(img);
            img.crossOrigin = "anonymous";
        }
    });

/* Delete the gallery */
const deleteGalleryButton = modal3.querySelector(".delete-gallery");

deleteGalleryButton.addEventListener("click", function(event) {
    const id = event.target.parentElement.dataset.id;
    const div = event.target.parentElement;
    let userId = div.dataset.userId;
    
    fetch(`http://localhost:5678/api/works/${id}`, {
        method: "DELETE",
        headers: {
            "Authorization": `Bearer ${userId}`,
        },
    })
    .then(response => {
        if (!response.ok) {
            throw new Error("Erreur 200")
        }
        return response.json();
    })
    .then(data => {
        modal3.querySelector("p").innerHTML = "";
    })
    .catch(error => {
        console.error("Problème Fetch", error);
    });
});

I’m a beginner and thanks for your help. Here is the image of the console :

401
4011889×265 13 KB

3

It is strange because i can. Do you use the main branch because the master it is not up to date. I pushed last work there is 10mn maybe after you tried. Could you try again please?

5

yes you log in with the loggin link and credentials given in repo readme. and you click on “modifier” link (modify) next to “Mes Projets”, a modal window open and click to “supprimer la galerie” (delete gallery) and the console show the issue. thank for your help. I was eating, sorry for the delay

6

If the id is undefined (in the console) I would assume this

event.target.parentElement.dataset.id

isn’t getting the value. What element is it you believe it is selecting?

<aside id="modal3" class="modal" aria-hidden="true" role="dialog">
	<div class="modal-wrapper modal-close">
		<div class="galleryModal3">
		</div>
		<button class="btn">Editer</button>
			<ul class="photo">
				<li><a class="linkphoto" href="#" role="button" data-target="#modal5" data-toggle="modal">Ajouter une photo</a></li>
			</ul>
			<ul>
				<li class="delete-gallery">Supprimer la galerie</li>
			</ul>
	</div>
</aside>

let modal3 = document.getElementById("modal3");
// other code

const deleteGalleryButton = modal3.querySelector(".delete-gallery");

deleteGalleryButton.addEventListener("click", function(event) {
    const id = event.target.parentElement.dataset.id;
	// rest of code
}
7

I think that : event.target.parentElement.dataset.id

select id, no ?

9

in fact I’m trying to have a function that deletes the gallery by referring to the work and the id

11

In fact. the class gallery in html include all photos and title with div for photo and div for title. I try to delete with the class gallery

13

With supprimer la galerie i want to delete all photosand their titles

15

Ok. I’m going to try

16

it’s planned to delete each photo individually but I haven’t started coding or adding the buttons yet. at the moment i don’t really know how to go about it

17

For add photo it is planned to click on “ajouter une photo” (add a photo) but it is in an other modal. You can click on “ajouter une photo” and you will see i’ve worked already a few on that function

19

I understand but the exercise is like that with the backend given, i work only on the frontend. Thank a lot for your help

20

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.