Empty Array in node

Question

I was building an application todo list in node and I'm stuck on how when I press clear to empty all the tasks.

What I am trying to do is that when I want to press the clear button, I want to empty the arrays and so that they will be cleared.

Here is my code:

Template List.ejs

<%- include("header") -%>

<div id="heading" class="box">
  <h1><%= listTitle %></h1>
</div>
<div class="box">
  <% for(let i = 0; i < newListItem.length; i++ ){ %>
  <div class="item">
    <input type="checkbox" />
    <p><%= newListItem[i] %></p>
  </div>
  <% } %>
  <form class="item" action="/" method="POST">
    <input
      type="text"
      name="newItem"
      placeholder="New Item"
      autocomplete="off"
      required
    />
    <!-- prettier-ignore -->
    <button class="btn" name="list" type="submit" value=<%= listTitle %>  >+</button>
    
  </form>
  <form action="/delete" method="DELETE">
    <button name="clearing" type="submit" class="btn2">Clear</button>
  </form>
  
</div>
<%- include("footer") -%>

App.js

//require stuff

const express = require("express");
const bodyParser = require("body-parser");
const date = require(__dirname + "/date.js");
console.log(date());
const app = express();
let items = [];
let workItems = [];
app.use(bodyParser.urlencoded({ extended: true }));
app.set("view engine", "ejs");
app.use(express.static("public"));
/************************************
 * **********************************
 * **********************************
 */
//get request Root
app.get("/", (req, res) => {
  let day = date();
  res.render("list", { listTitle: day, newListItem: items });
});
//Post request
app.post("/", (req, res) => {
  let item = req.body.newItem;
  if (req.body.list === "Work") {
    workItems.push(item);
    res.redirect("/work");
  } else {
    items.push(item);
    res.redirect("/");
  }
});
/************************************
 * **********************************
 * **********************************
 */
//work
app.get("/work", (req, res) => {
  res.render("list", { listTitle: "Work List", newListItem: workItems });
});
app.post("/work", (req, res) => {
  let item = req.body.newItem;
  workItems.push(item);
  res.redirect("/work");
});
/************************************
 * **********************************
 * **********************************
 */
app.get("/about", (req, res) => {
  res.render("about");
});

app.get("/delete", (req,res) => {
  res.redirect("/");
})
app.post("/delete", (req,res) => {
 let clearing = req.body.clear;
    if(clearing){
      items = [];
      res.redirect("/");
    }
})


//listen server
app.listen(process.env.PORT|| 8080, () => {
  console.log("Server started working now!");
});

If you look to my code, All what I was trying to do is when I press the clear the tasks. — , Sep 23 '20 at 06:49

Max Peng · Answer 1 · 2020-09-23T06:59:42.067

0

change post to delete:

app.delete("/delete", (req,res) => {
    items = [];
    res.redirect("/");
})

edited Sep 23 '20 at 06:59

answered Sep 23 '20 at 06:51

Max Peng

2,879
1
26
43

you didn't pass the request body? can you try to comment out the `if` condition and try again? – Max Peng Sep 23 '20 at 06:55
refer to my edit, if it works then check how to pass the request body from your template. – Max Peng Sep 23 '20 at 07:01

score 0 · Answer 2 · answered Sep 23 '20 at 07:00

0

Try this:

app.delete("/delete", (req,res) => {
 let clearing = req.body.clear;
    if(clearing){
      items.splice(0,items.length)
      res.redirect("/");
    }
})

For more reference, you can check out other methods here: link

answered Sep 23 '20 at 07:00

Siddhant Shrivastav

259
4
12

I tried but it didn't work, maybe something from .ejs or the position of the form ? – Sep 23 '20 at 07:05

score 0 · Answer 3 · answered Sep 23 '20 at 07:16

0

Put your form action to 'POST' for your delete button. Html form method takes only 2 values GET or POST. If you want to use the DELETE verb, you will have to use ajax.

For your case, if you change the form method to POST, it should be fine.

<form action="/delete" method="POST">
<button name="clearing" type="submit" class="btn2">Clear</button>

answered Sep 23 '20 at 07:16

Adarsh

11
1

Changed to post, but the route are loading and loading – Sep 23 '20 at 07:19
app.get("/delete", (req,res) => { res.redirect("/"); }) app.delete("/delete", (req,res) => { let clearing = req.body.clear; if(clearing){ items.splice(0,items.length) res.redirect("/"); } }) – Sep 23 '20 at 07:19

score 0 · Answer 4 · answered Sep 23 '20 at 07:31

app.get("/delete", (req,res) => {
  res.redirect("/");
})
app.post("/delete", (req,res) => {
       items.splice(0,items.length)
       res.redirect("/");
 })


 <form action="/delete" method="POST">
    <button name="clearing" type="submit" class="btn2">Clear</button>
  </form>

Thanks to your help after several attempts it works. Thanks everybody.

score 0 · Answer 5 · answered Sep 23 '20 at 08:10

Change List.ejs form submit to this:

<form action="#!" onsubmit="handleClick()">
    <button name="clearing" type="submit" class="btn2">Clear</button>
</form>

And write this javascript in script tag:

function handleClick(){
    fetch('/delete',{
        method: 'delete'
      }).then(res => {
           if (res.ok) return res.json()
      }).then(data => {
           console.log(data.message);
           window.location.reload();
      })
   })

Finally, in App.js remove app.post('/delete') and app.get('/delete') instead write:

app.delete('/delete', (req, res)=>{
    items = [];
    res.send({
        status: 200,
        message: 'Successfully Deleted/Cleared'});
  });

Empty Array in node

5 Answers5