Home » Javascript » How to add functional delete button for items in a table pulled from mongo? [on hold]

How to add functional delete button for items in a table pulled from mongo? [on hold]

Posted by: admin August 19, 2018 Leave a comment

Questions:

I currently have this script on my page that displays data from my mongodb collection and i’m trying to add a button with a function that will delete the specific document from the database. Here is the link to the herokuapp if you want to see it:

loainventory.herokuapp.com

(test login: email: [email protected], pwd: Abcde123!)

<script>
function createTableFromJSON(){
    $.getJSON( "getFeedback", {
        format: "json"
    })
        .done(function( data ) {
            var divContainer = document.getElementById("showData");
            var myData = data;
            var col=[];
            if (myData === undefined || myData.length == 0) {
                divContainer.outerHTML = "<h2>There is currently no feedback</h2>";
                return;
            }
            for(var i=0;i<myData.length;i++){
                delete myData[i]['_id'];
                for(var key in myData[i]){
                    if(col.indexOf(key)=== -1){
                        col.push(key);
                    }
                }
            }

            var table=document.createElement("table");

            var tr=table.insertRow(-1);
            for(var i =0; i<col.length;i++){
                var th=document.createElement("th");
                th.innerHTML=col[i];
                tr.appendChild(th);
            }
            for(var i=0;i<myData.length;i++){
                tr = table.insertRow(-1);

                for(var j=0;j<col.length;j++){
                    var tabCell=tr.insertCell(-1);
                    tabCell.innerHTML=myData[i][col[j]];

                }
                var deletebtn=tr.insertCell(-1);
                deletebtn.innerHTML = '<input type="button" ng-click="????">Delete</button>';
            }

            divContainer.innerHTML="";
            divContainer.appendChild(table);
        });
}


   createTableFromJSON();

</script>

I’m stuck on what to do. I have a clear all button that works but I’m hitting a wall for the individual delete buttons. Here is the code for the clear button, saved under clearData.js

//clearData
var express = require('express');
var router = express.Router();

var appVars=require('../server.js')
console.log("hello")
router.post("/",function(req,res){
 var p=appVars.getPublicPath()
 var db=appVars.getDb()
 db.collection("inventory").remove({})
 res.sendFile(`${p}/viewOrders.html`)
})
module.exports=router;

And in case it helps any, here’s the html

<div class="w3-content" style="max-width:1100px;margin-top:80px;margin-bottom:80px">

<div class="w3-panel">
   <h1><b>LOAinventory</b></h1>

 </div>

 <div class="content">

<table class="table table-hover">
  <div class="row">     
  </div>
  <div class=row><p></p></div>
    <div id="showData"></div> 

<form action="/clearData" method="POST">
    <div class="form-group">
          <input type="submit" value="Clear Data"></button>
    </div>
</form>
    </tr>

  </table>

  <hr>
</div>

Answers: