samedi 21 janvier 2023

How to code a checkbox that saves changes after refreshing page

I'm trying to change the checkbox data on the server using the patch method, but I can't do it. Give me an advise, please, how to do it correctly. I send a patch request, 202 code is returned. In the preview (developer tools in the browser) it is shown that the changed data is returned from the server, but for some reason the changes do not occur in the db.json file. After I check the checkbox and refresh the page it’s like I never checked the box.

I need an input checkbox that will send a PATCH request to the server to change the TODO-list state.

What I have so far:

async function editCheckbox(id) {
    try {
        checkbox = {
            completed: document.querySelector(`[data-id="${id}"]` + ' input[type="checkbox"]').checked
        }
        await fetch('http://localhost:8080/todo/' + id, {
            method: 'PATCH',
            body: JSON.stringify(checkbox),
            headers: {
                'Content-Type': 'application/json; charset=utf-8',
            },
        });
    } catch (err) {
        console.log(err);
    }
}

And I use a patch on the route:

app.patch("/todo/:id", (req, res) => {
    const { id } = req.params;
    let rawdata = fs.readFileSync("db.json", "utf8");
    let content = JSON.parse(rawdata);
    if (!content.find((i) => i.id == id)) {
        return res.status(404).json({ message: "Todo with that id not found" });
    } else {
        const newTodo = req.body;
        const toWrite = content.map((i) => {
            if (i.id === id) {
                return newTodo;
            }
            return i;
        });

        fs.writeFileSync("db.json", JSON.stringify(toWrite), (err) => {
            if (err) {
                console.error(err);
            }
        });
        res.status(202).json(newTodo);
    }
});



Aucun commentaire:

Enregistrer un commentaire