Deleting an element in a JSON file

Question

I just started on my first project, on my way to learn how to code. I've saved all users in a JSON file called storage.JSON and I have the information about the user that is logged in in Local Storage under the name "currentUser". I'm trying to create a button, where the user can delte themself from the JSON file. When I console log throughout my filtering it works. It seems to me that the problem is that the problem can't catch the allUsers variable outside the if-statement. Can anyone help me on how I can solve this problem so I can send the allUsers back to the API in the end of the function.

Here is my code in the API:

app.delete('/deleteProfile', (req, res) => {
    
    var allUsers = JSON.parse(fs.readFileSync("storage.JSON"))
    res.json(allUsers)

})

app.post('/deleteProfile', (req, res)=> {
    let reqData = req.body;
    console.log('Post request virker')
    console.log(reqData) 
    var storage = JSON.parse(fs.readFileSync("storage.JSON"))
    storage.push(reqData);
    fs.writeFileSync("storage.JSON", JSON.stringify(storage, null, 2));

    //console.log(reqData);
    res.send(JSON.stringify({mesagge: 'This user has been delete from', storage}));
})

Code in deleteUser.js

deleteUser = document.getElementById("deleteBtn")


deleteUser.addEventListener('click', function() {
    
        const xhr = new XMLHttpRequest();
        xhr.responseType = "json"
    
        xhr.addEventListener("readystatechange", function() {
        if(this.readyState === 4) {
            var allUsers = this.response;
            console.log(allUsers);

      
            
          let currentUser = JSON.parse(localStorage.getItem("currentUser"))

            allUsers = allUsers.filter(allUser => allUser.username !== currentUser.username);
            console.log(allUsers);

        } });
                       

        xhr.open("DELETE", "http://localhost:2500/deleteProfile", true);
            
        xhr.setRequestHeader("Content-Type", "application/json");
            
      
        xhr.send(JSON.stringify(allUser));
    })

score 1 · Accepted Answer · answered Dec 03 '20 at 20:47

1

you should define allUsers variable out of if block scope and set that data in if block. try this one in deleteUser.js:

    deleteUser = document.getElementById("deleteBtn")
    
    
    deleteUser.addEventListener('click', function() {
            let allUsers;
            const xhr = new XMLHttpRequest();
            xhr.responseType = "json"
        
            xhr.addEventListener("readystatechange", function() {
            if(this.readyState === 4) {
                allUsers = this.response;
          
                
              let currentUser = JSON.parse(localStorage.getItem("currentUser"))
    
                allUsers = allUsers.filter(allUser => allUser.username !== currentUser.username);
    
            } });
                           
    
            xhr.open("DELETE", "http://localhost:2500/deleteProfile", true);
                
            xhr.setRequestHeader("Content-Type", "application/json");
                
          
            xhr.send(JSON.stringify(allUser));
        })

answered Dec 03 '20 at 20:47

alefseen

176
6

Thank you for your help @alefseen :-) do you know if it is correct that I have used delete for my first request when i get the data from my JSON file and afterwards use post to update the JSON file. Because now the function runs and does delete the user when I console.log, but it doesn't update the JSON-file. – CodingBeginner Dec 03 '20 at 21:14
I think your delete request in express don't send any response. if its true, call send function after set json data ` res.json(allUsers).send()` and in your app just need to replace delete response to older data – alefseen Dec 03 '20 at 21:33
Thank you. When you say I gave to replace delete response to older data, can you elaborate on this? – CodingBeginner Dec 03 '20 at 21:50
this can help you: https://stackoverflow.com/questions/3038901/how-to-get-the-response-of-xmlhttprequest – alefseen Dec 03 '20 at 21:54

Deleting an element in a JSON file

1 Answers1