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

【问题标题】：How can I remove completed tasks in toDo App Javascript如何在 toDo App Javascript 中删除已完成的任务
【发布时间】：2018-03-16 16:26:20
【问题描述】：

我不知道如何从我的 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
    }
  ]
}

我想删除所有任务 - 活动：单击按钮为假。我必须使用 XMLHttpRequest。

【问题讨论】：

你有任何 JS代码吗？服务端也是JS，还是……？
我添加了答案。希望它能按预期工作。

标签： javascript json ajax xmlhttprequest

【解决方案1】：

您可以遍历您的 JSON 变量，然后在检查活动键时设置条件。如果它是真的然后删除它。您可以使用 splice 从数组中删除元素。然后将其发送到您的服务器端等。

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

【讨论】：

【解决方案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);

【讨论】：

【解决方案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);
}

&lt;input type="button" value="Remove" onClick="removeCompletedTask()"/&gt;

【讨论】：

【解决方案4】：

我只使用json服务器（没有php文件）
如果我想删除单个任务，请执行此代码

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 中删除了任务，但不会自动呈现我的页面，只有在预加载后我看不到已完成的任务

【讨论】：