Info S & Quality Assurance Projects- Issue Tracker (Question about .delete function)

Hello. Is anyone else having trouble getting the .delete function to work properly? From what I can tell, this function SHOULD trigger when you click on the ‘Delete Issue’ button. However, nothing happens. I have try doing a console.log to check whether this function triggers after clicking the button. Nothing.

I have also tried to remix the example project on Glitch, and see what I’d get if I press the Delete Issue button. Still nothing.

I have even tried to restart the project and just had a console.log at that function. Still nothing.

What is the .delete function supposed to do then? I am referring to this part:

.delete(function (req, res){
  var project = req.params.project;
  //console.log(req.body._id);
  });
})

in api.js.

Thanks.

Hello!

Welcome to the forum :partying_face:!

The project you’ve tried to remix is not finished and you’re expected to complete it using what you’ve learned.

You have to understand a concept first: back end and front end.

The back end (for this project, it’s using Node/Express) is the part of the software that handles the communication with the database (and, depending on the design, other services or even other databases and APIs). This is the server part, the one that is processed only when a request is done.

On the other hand, the front end is the part that handles the user interaction, the viewable part on the browser. When you load a page on your browser, you’re requesting a file (usually). The server may or may not need to process your request using a third party software (in this case, the back end uses NodeJS and Express to create a REST API) and respond with the processed file. Once the file is processed, it’s sent back to the browser and presented to the user.

The project is not working because the front and back end are partially complete.

In other words, the delete function doesn’t work because you’re required to complete it :slight_smile:.

I hope this helps :slight_smile:,

Regards and happy coding!

Hello, I am sorry, but I don’t think you read everything I wrote. The project I remixed was protective-garage.glitch which is the full demo project, so I would expect it to work? I am not remixing the one that is incomplete.

I already understand both concepts here (or atleast, to some extent), and what the project seems to want me to do. If I didn’t, I wouldn’t be on the second project, haha. I have already completed .get, .post, .put functions. Aside from fringe cases, they all work as intended.

I will try to explain myself better:

.get, .post, .put all work properly. They trigger when api/issues/project is called or if the Submit Issue button is pressed, respectively. I have tested all three by simply typing in console.log(“A”) and the word A would output in my Glitch console.

Unless I need to edit anything in the other files, the logic here is that all four should work without any complete implementations. This is not the case for .delete. It does not get triggered. A simple console.log(“A”) is never triggered when I press the Delete Issue key. Furthermore, I have done a half-implementation of it. Nothing gets removed in my database.

Thank you.

Yes, you’re right, sorry about that :sweat_smile:.

Well, there is a bug on the project which creates the problem you describe. Check the source code and see if you can find it :slight_smile:.

Hint

The back end is working right.

Hint 2

The problem is on the front end.

Thank you! For those of you who stumbles to this post in the future, I fixed it by:

Fix

There seems to be a bug in index.html.
Editing anything will show you all the errors.
Replace the single quotes with double quotes.
In the Delete issue on… part, you need to have a different id. I just changed 2 to 3, like so: form id=“testForm3” …

1 Like

Hello there! I’m having the same bug issue with the delete function not working. I keep getting no json response on the front end and also a syntax error in the console where it doesn’t like the . in front of delete for some reason which can’t be right. .delete(function (req, res) just like you. I read how you solved it but it’s not working for me.

Can you clarify what you mean by " In the Delete issue on… part, you need to have a different id"? I know exactly where that is in the index.html file, I just mean do I need to change the name="_id" to something else? Because I tried that and unfortunetely it didn’t work. Is there something maybe I missed? Thanks in advance.

Glad to know I’m not crazy and not the only one having an issue with the last test of .delete

Here’s my code:

index.html

<h3>Delete issue on <i>apitest</i></h3>
      <form id="testForm3" class="border">
        <input type="text" name="_id" placeholder=" _id" style="width: 200px" required=""><br>
        <button type="submit">Delete Issue</button>
      </form>
      <code id='jsonResult'></code>
    </div>

api.js

'use strict';
const mongoose = require('mongoose');
const IssueModel = require('../models').Issue;
const ProjectModel = require('../models').Project;
const ObjectId = mongoose.Types.ObjectId;

module.exports = function (app) {

  app.route('/api/issues/:project')

    .get(function (req, res){
      let projectName = req.params.project;
      const {
        _id,
        open,
        issue_title,
        issue_text,
        created_by,
        assigned_to,
        status_text,
      } = req.query;

      ProjectModel.aggregate([
        { $match: { name: projectName } },
        { $unwind: '$issues'},
        _id != undefined
          ? { $match: { 'issues._id': ObjectId(_id) } }
          : { $match: {} },
        open != undefined
          ? { $match: { 'issues.open': open } }
          : { $match: {} },
        issue_title != undefined
          ? { $match: { 'issues.issue_title': issue_title } }
          : { $match: {} },
        issue_text != undefined
          ? { $match: { 'issues.issue_text': issue_text } }
          : { $match: {} },
        created_by != undefined
          ? { $match: { 'issues.created_by': created_by } }
          : { $match: {} },
        assigned_to != undefined
          ? { $match: { 'issues.assigned_to': assigned_to } }
          : { $match: {} },
        status_text != undefined
          ? { $match: { 'issues.status_text': status_text } }
          : { $match: {} },
        ]).exec((err, data) => {
          if (!data) {
            res.json([]);
        } else {
          let mappedData = data.map((item) => item.issues);
          res.json(mappedData);
        }
      });
    })

    .post(function (req, res){
      let project = req.params.project;
      const {
        issue_title,
        issue_text,
        created_by,
        assigned_to,
        status_text,
      } = req.body;
      if (!issue_title || !issue_text || !created_by) {
        res.json({ error: 'required field(s) missing'});
        return;
      }
      const newIssue = new IssueModel({
        issue_title: issue_title || "",
        issue_text: issue_text || "",
        created_on: new Date().toUTCString(),
        updated_on: new Date().toUTCString(),
        created_by: created_by || "",
        assigned_to: assigned_to || "",
        open: true,
        status_text: status_text || "",
      });

      ProjectModel.findOne({ name: project }, (err, projectdata) => {
        if (!projectdata) {
          const newProject = new ProjectModel({ name: project });
          newProject.issues.push(newIssue);
          newProject.save((err, data) => {
            if (err || !data) {
              res.send("There was an error saving in post");
            } else {
              res.json(newIssue);
            }
          });
        } else {
          projectdata.issues.push(newIssue);
          projectdata.save((err, data) => {
            if (err || !data) {
              res.send('There was an error saving in post');
            } else {
              res.json(newIssue);
            }
          })
        }
      })
    });

    .put(function (req, res){
      let project = req.params.project;
      const {
        _id,
        issue_title,
        issue_text,
        created_by,
        assigned_to,
        status_text,
        open,
      } = req.body;
      if (!_id) {
        res.json({ error: 'missing _id' });
        return;
      }
      if (
        !issue_title &&
        !issue_text &&
        !created_by &&
        !assigned_to &&
        !status_text &&
        !open
      ) {
        res.json({ error: 'no update field(s) sent', _id: _id });
        return;
      }
      ProjectModel.findOne({ name: project }, (err, projectdata) => {
        if (err || !projectdata) {
          res.json({ error: 'could not update', _id: _id });
        } else {
          const issueData = projectdata.issues.id(_id);
          if (!issueData) {
            res.json({ error: 'could not update', _id: _id});
            return;
          }
          issueData.issue_title = issue_title || issueData.issue_title;
          issueData.issue_text = issue_text || issueData.issue_text;
          issueData.created_by = created_by || issueData.created_by;
          issueData.assigned_to = assigned_to || issueData.assigned_to;
          issueData.status_text = issue_title || issueData.status_text;
          issueData.updated_on = new Date();
          issueData.open = open;
          projectdata.save((err, data) => {
            if (err || !data) {
              res.json({ error: 'could not update', _id: _id });
            } else {
              res.json({ result: 'successfully updated', _id: _id });
            }
          })
        }
      })
    });
    .delete(function (req, res) {
      let project = req.params.project;
      const { _id } = req.body;
      if (!_id) {
        res.json({ error: 'missing_id' });
        return;
      }
      ProjectModel.findOne({ name: project }, (err, projectdata) => {
        if (!projectdata || err) {
          res.send({ error: 'could not delete', _id: _id });
        } else {
          const issueData = projectdata.issues.id(_id);
          if (!issueData) {
            res.send({ error: 'could not delete', _id: _id });
            return;
          }
          issueData.remove();

          projectdata.save((err, data) => {
            if (err || !data) {
              res.json({ error: 'could not delete', _id: issueData._id });
            } else {
              res.json({ result: 'successfully deleted', _id: issueData._id });
            }
          });
        }
      });
    });
};