How to do ajax delete on react

443
May 24, 2017, at 09:31 AM

I was wondering if delete works like add but it doesn't. Im using fetch method Im not familiar on react's ajax so I am not clearly sure whats wrong with my code

so here is my code onclick delete

deleteEmployee(id) {
  jQuery.support.cors = true;
    fetch('http://localhost:5118/api/employeedetails/DeleteEmployeeDetail/'+ id, {
         method: 'GET'
  }).then(function(response) {
     // history.go(0);
      var jsonReturnedValue = [...this.state.jsonReturnedValue]; 
      this.setState({jsonReturnedValue})
  }).catch(function(err) {
    // Error :(
  });
}

this is the code for the table

< div className="container">   
          <h1> Listof Employees </h1>
            <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
             <table className= "table table-bordered" id="result"> 
                <tbody>
                 <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Address</th>
                      <th>Update</th>
                      <th>Delete</th>
                 </tr>
                    {jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
                </tbody>
            </table>
          </div>

code for the calling of the data where the button located

renderItem(d, i) {
  return <tr key={i} >
    <td> {d.Employee_ID} </td>
    <td>{d.Employee_Name}</td>
    <td>{d.Address }</td> 
    <td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this,  d.Employee_ID, d.Employee_Name, d.Address , d.Department)}   data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
    <td><center><input type="submit" className ="btn btn-danger" onClick={this.deleteEmployee.bind(this,  d.Employee_ID)}  value="Delete"/></center></td>
 </tr>
}

PS: the code itself is working so the console says nothing is wrong but i want it when i click it the table reloads

Answer 1

Step 1 - You need to call index in your functiondeleteEmployee(id,index)

Step 2 - Call Splice method after request end

  deleteEmployee(id, index) {
      jQuery.support.cors = true;
        fetch('http://localhost:5118/api/employeedetails/DeleteEmployeeDetail/'+ id, {
             method: 'GET'
      }).then(function(response) {
         // history.go(0);
          var jsonReturnedValue = [...this.state.jsonReturnedValue]; 
          this.setState({jsonReturnedValue})
      }).catch(function(err) {
        // Error :(
      });
   **this.state.jsonReturnedValue.splice(index, 1)**
///You can call as empty        
      this.setState({})
    }

EDIT/////

Also, the render shouldnt call as a function. You can use like that

     {jsonReturnedValue.map((d,i) => <tr key={i} >
    <td> {d.Employee_ID} </td>
    <td>{d.Employee_Name}</td>
    <td>{d.Address }</td> 
    <td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this,  d.Employee_ID, d.Employee_Name, d.Address , d.Department)}   data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
    <td><center><input type="submit" className ="btn btn-danger" onClick={this.deleteEmployee.bind(this,  d.Employee_ID)}  value="Delete"/></center></td>
 </tr>)}

And then

onClick={this.deleteEmployee.(d.Employee_ID, i)}

you can call bind in constructor

 constructor(props) {
        super(props)
        this.state = {
           example: ""
        }
        this.deleteEmployee = this.deleteEmployee.bind(this)
    }
Answer 2

It looks like you're storing your list of employees in this.state.jsonReturnedValue. In your deleteEmployee function you make a copy of the array, but don't change any of the values. Presumably, you want to remove the row for the employee that was deleted before calling this.setState with the updated array.

Rent Charter Buses Company
READ ALSO
Can someone please help me understand this piece of code? [on hold]

Can someone please help me understand this piece of code? [on hold]

I was looking up a program online and this entire function really stumped me

268
Adding a timer to a firebase object?

Adding a timer to a firebase object?

I am currently making a application to track an items expiry dateI am using firebase to store data about the item such as, name, amount, date until expired

364
Adjust google spreadsheet row by one

Adjust google spreadsheet row by one

My current spreadsheet has 1 frozen row as the headerI am trying to figure out how to adjust, slice, move, etc by 1

335
Convert date to another timezone in JavaScript

Convert date to another timezone in JavaScript

I am looking for a function to convert date in one timezone to another

2611