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

Question

我不知道如何从json文件和我的应用视图中删除所有已完成的任务：

    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
    }
  ]
}

我想删除所有任务 - 通过一次单击按钮激活：false。 我必须使用XMLHttpRequest。

Answer 1

您可以循环访问JSON变量，然后检查活动密钥。如果是真的那么删除它。您可以使用splice从数组中删除元素。然后将其发送到您的服务器端等。

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

Answer 2

您需要到服务器端更改文件内容，我认为您要这样做。 使用JS和PHP，你会得到类似的东西：

对于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);

});

对于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

试试这个：

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. 我只使用json服务器（没有php文件）

2. 如果我想删除单个任务，我会执行此代码

   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); }

   1. 我做了复选框以更改我的任务，我想删除所有这些我尝试这样的事情：

   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);}}
   

   `

   这个从json删除的任务但是没有自动渲染我的页面，只有在预加载后我才看到完成的任务