如何在toDo App Javascript中删除已完成的任务

Question

I don't have idea how can i deleted all completed tasks from my json file and my app view:

    json:
{
  "list": [
    {
      "name": "Cleaning",
      "desc": "by me",
      "date": "11-3-2018 13:38",
      "active": "false",
      "id": 1
    },
    {
      "name": "Wash the dishes",
      "desc": "by me",
      "date": "11-3-2018 23:11",
      "active": "true",
      "id": 2
    },
    {
      "name": "Training",
      "desc": "go with bro",
      "date": "15-1-2016 23:41",
      "active": "false",
      "id": 3
    }
  ]
}

I would like to deleted all tasks - active: false by one click button. I have to use XMLHttpRequest.

Answer 1

You can loop through your JSON variable then have a condition on checking the active key. If its true then remove it. You can use splice to remove elements from an array. Then send it to your server side or etc.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Answer 2

You will need to go server side to change the content of files, which I think you want to do. Using JS and PHP you would get something like:

For the JS:

$("#yourButtonId").on('click', function(){

  //Get the JSON file 
  var request = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      var jsonObj = JSON.parse(this.responseText);

      //Go over all tasks and remove if active is set to false
      for (var i = 0; i < jsonObj.length; i++) {
        if(jsonObj.list[i].active == "false"){
          delete jsonObj.list[i];
        };
      }

      //Send the updated json file as string to PHP
      var xmlhttp = new XMLHttpRequest();    
      xmlhttp.open("GET", "yourphpfile.php");
      xmlhttp.send(JSON.stringify(jsonObj));
    }
  }
  request.open("GET", "urlToJson.json", false);
  request.setRequestHeader("Content-type", "application/json")
  request.send(null);

});

For the PHP:

//Get your updated json string
$theJson = $GET['jsonObj'];

//Write the updated json string to the file
$myfile = fopen("urlToJson.json", "w") or die("Unable to open file!");
fwrite($myfile, json_encode($theJson));
fclose($myfile);

Answer 3

Try this :

 var jsonObj = { "list": [{ "name": "Cleaning", "desc": "by me", "date": "11-3-2018 13:38", "active": "false", "id": 1 }, { "name": "Wash the dishes", "desc": "by me", "date": "11-3-2018 23:11", "active": "true", "id": 2 }, { "name": "Training", "desc": "go with bro", "date": "15-1-2016 23:41", "active": "false", "id": 3 } ] }; function removeCompletedTask() { var resJson = jsonObj.list.filter(item => item.active == "true"); console.log(resJson); } 

 <input type="button" value="Remove" onClick="removeCompletedTask()"/> 

Answer 4

1. I use only json server (without php file)

2. If I want to delete single task I do this code

   function deleteTask(task) { var xhr = new XMLHttpRequest(); xhr.open("DELETE", url + "/" + task.dataset.id, true); xhr.onload = function() { var json = JSON.parse(xhr.responseText) if (xhr.readyState == 4 && xhr.status == 200) { task.parentNode.parentNode.removeChild(task.parentNode); } } xhr.send(null); }

   3. I did checkbox to change active my tasks and i would like to delete all of them i try something like this:

   function clearTasksCompleted(task) { var taskCompleted = task.parentElement.parentElement.querySelectorAll('li'); var completed = [];

for(let i =0; i<taskCompleted.length; i++){

  if(taskCompleted[i].querySelector('.checkbox').checked)
  {
    completed.push(taskCompleted[i]);
  }

}

for (let i=0; i<completed.length; i++) {

  var xhr = new XMLHttpRequest();
  xhr.open("DELETE", url + "/" + completed[i].dataset.id, true);

xhr.onload = function() {

    if (xhr.readyState == 4 && xhr.status == 200) {
      var json = JSON.parse(xhr.responseText);
     completed[i].parentNode.removeChild(completed[i])
    }
  }
  xhr.send(null);}}

`

and this deleted tasks from json but dont render my page automatically, only after preload i don't see completed tasks