How to redirect in a DELETE express function?

Question

I am trying to do a redirect in an express delete function. When the user hits the "delete" button on front end, I want the backend function to delete the json data and then refresh/redirect the page so the user views an update page with the deleted data missing. On the front-end I have written this code:

$(document).on("click",".del", function(){
    const id = $(this).attr("data-name");
    $.ajax({
        url:"/api/note/"+id,
        method: "DELETE"
    }).then(function(data){
        console.log(data);
    })
})

On the back end server side:

app.delete("/api/note/:id", function(req,res){
const delNote = req.params.id;
const delArr = [];
fs.readFile("./db/noteList.json", "utf8",function(err,data){
    if(err) throw err;
    const noteList = JSON.parse(data);
    for(let i=0;i<noteList.length;i++){
        if(noteList[i].title==delNote){
            delete noteList[i].title;
            delete noteList[i].date;
            delete noteList[i].notes;
        }
        else{
            delArr.push(noteList[i]);
        }
    }
    fs.writeFile("./db/noteList.json",JSON.stringify(delArr),function(err){
        if(err) throw err;
        console.log("Added");
        res.redirect("/notes"); //NOT WORKING//
        
    });
    
});

As a general rule of thumb, I'd say never issue a 301 / 302 redirect response for an API call. — Phil, Oct 26 '20 at 00:04
An Ajax call does not cause the browser to redirect - ever. The 302 response just goes back to your Javascript - that's all that happens with it. From your Javascript, you can look for the 3xx response, grab the `location` header and manually set `window.location` to the new URL if you want to cause the browser to redirect from your Javascript. — jfriend00, Oct 26 '20 at 00:24
@jfriend00 depending on how things are configured, the AJAX request typically follows the redirect and attempts to load the content for the next URL. See [Detecting a redirect in ajax request?](https://stackoverflow.com/questions/9177252/detecting-a-redirect-in-ajax-request) — Phil, Oct 26 '20 at 00:28
@Phil - An AJAX call may follow the redirect itself (depending upon configuraiton), but it NEVER displays that redirected content in the browser unless you write Javascript to do that because the redirected content just goes to your Javascript. — jfriend00, Oct 26 '20 at 00:39

score 1 · Answer 1 · answered Oct 26 '20 at 00:13

You'll have to redirect/refresh in frontend

$(document).on("click",".del", function(){
    const id = $(this).attr("data-name");
    $.ajax({
        url:"/api/note/"+id,
        method: "DELETE"
    }).then(function(data){
        window.location.reload(); // to refresh
        window.location.href = 'your-new-url-here'; // to navigate
    })
});

app.delete("/api/note/:id", function(req,res){
const delNote = req.params.id;
const delArr = [];
fs.readFile("./db/noteList.json", "utf8",function(err,data){
    if(err) throw err;
    const noteList = JSON.parse(data);
    for(let i=0;i<noteList.length;i++){
        if(noteList[i].title==delNote){
            delete noteList[i].title;
            delete noteList[i].date;
            delete noteList[i].notes;
        }
        else{
            delArr.push(noteList[i]);
        }
    }
    fs.writeFile("./db/noteList.json",JSON.stringify(delArr),function(err){
        if(err) throw err;
        console.log("Added");
        res.status(200);
        res.write('Success');
    });
    
});

`reload()` is not what the OP wants. They want it to redirect to `/notes`. — jfriend00, Oct 26 '20 at 00:24
thanks for the help. But its still not working. I made your edits. I am not longer getting a 404 error however nothing is refreshing. I put a console.log below the "window.location.href = 'your-new-url-here'; // to navigate" and got nothing to display in the console. Not sure why that is happening. Not sure how to debug with no errors. — Owen Roth, Oct 26 '20 at 00:28

How to redirect in a DELETE express function?

1 Answers1