Express get URL and delete certain object

Question

Now I'm developing CRUD(Create, Read, Update, Delete) App with Express and LowDB.

And I successfully developed the create and read but Delete Function is not working.

There are detail page like this

as you can see there are trash can Icon and actually I also have some problem the submit button but It's not important so I just make submit button.

this is the part of the pug file

aside#Delete.is-visible
  form(method="post" action='/delete_process')
   input(type='submit')
  a#DeleteButton(role='button')
    img(src='https://png.icons8.com/ios/35/000000/waste-filled.png' id="go_up")
    span.text
      | Delete
      br
      b this

detail page have URL (ex: DIR1WTqr2) and it's DB id

and delete Process code is like this.

/* Delete Process */
router.post('/delete_process', function (req, res) {
    // GET Delete ID from URL
    let id=req.params.id;

    console.log(id);
    db.get('project').find({
      id: id
    }).remove().write();

});

I thought I can get URL and find the data with the id in json file. but It's not working. When I tried to console the req.params.id it said undefined

And I think there are collision with view Detail page because Detail page code is like this.

/* GET Detail View Page */
router.get('/:id', (req, res, next) => {
  // GET URL params and put it into :id
  let id = req.params.id;
  // console.log(id);
  // GET data id to use Object
  let data = db.get('project').find({
    id: id
  }).value();
  // Get github URL
  let url = data.githuburl;
  // Use Request Module to parsing Web page
  request(url, function (error, response, html) {
    if (error) {
      throw error
    };
    // Parsing readme ID in github page
    var $ = cheerio.load(html);
    $('#readme').each(function () {
      // save to readme Variable
      let readme = $(this).html();
      // console.log(data);
      // console.log(id);
      res.render('detail', {
        dataarray: data,
        name: data.name,
        url: data.url,
        explanation: data.explanation,
        imgurl: data.imgurl,
        markdown: readme,
        startDate: data.pjdate1,
        endDate: data.pjdate2,
        githuburl: data.githuburl,
        sumlang: data.sumlang
      });
    });
  });
});

because of :id when I click the /delete_process it goes to detail page I think.

Graham · Accepted Answer · 2018-10-08 14:26:59Z

Pug is very specific about your indentation. Your button wasn't contained inside the form - it was a sibling. Make sure that you've always got two spaces when you want an element to be contained inside another.

Change the pug template to this and the button will submit properly:

aside#Delete.is-visible
  form(method="post" action='/delete_process')
    input(type='submit')
      a#DeleteButton(role='button')
        img(src='https://png.icons8.com/ios/35/000000/waste-filled.png' id="go_up")
        span.text
          | Delete
          br
          b this

But wait there's more! You aren't passing the id of the restaurant back with the form.

I can't see how you're using the restaurant id in the pug, but you'll need to add that into the form somehow too. Let's assume it's a variable in the pug template called restaurant.id.

Your node.js route handler is trying to read req.params.id which means that it's going to look to the url to get the id of the restaurant. You can add the id to the request like this:

aside#Delete.is-visible
  form(method="post" action='/delete_process/' + restaurant.id)
    input(type='submit')

Then, you'll also need to modify your route to include the id parameter:

router.post('/delete_process/:id', function (req, res) {

A different way to do this would be to add a hidden form field that sends the id with the form (here's an article that explains this concept). If you do it this way you can change the form to look like this:

aside#Delete.is-visible
  form(method="post" action='/delete_process/' + restaurant.id)
    input(type='hidden' name='id' value= restaurant.id)
    input(type='submit')

Then your delete handling route can pick it up like this:

router.post('/delete_process', function (req, res) {
    // GET Delete ID from form field
    let id= req.body.id;

The first method of passing the id (in the url) is standard for ajax requests, the second method (as a field in the form) is the standard for posting a form.

Collectives™ on Stack Overflow

Express get URL and delete certain object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related