使用angularjs从json文件中删除项目

时间:2016-09-01 21:06:58

标签: javascript angularjs json

我花了很多时间尝试从Json文件中删除项目

这是我的json文件

 {
  "count": 3,
  "data": [
    {
      "id": "1",
      "raison": "ABS",
      "email": "abs@abs.com",
      "tel": "021269999999"
    },
    {
      "id": "3",
      "raison": "PODL",
      "email": "abs@abs.com",
      "tel": "021269999999"
    }, {
      "id": "5",
      "raison": "dDMS",
      "email": "abs@abs.com",
      "tel": "021269999999"
    }
  ]
}
控制器中的

我喜欢这个

 $scope.deleteRow = function() {
  var _id = 3;
          $scope.datas = JSON.stringify($scope.clients["data"]);
          $scope.datas.splice(_id,1);
       };

所以我给了_id,我想要删除,但我得到这个错误$ scope.datas.splice拼接不是一个函数,我尝试了一个简单的文件,它工作得很好["aaa","bob,"ccc"]使用{ {1}}和拼接,但在这个文件json non :(

javascript中如何知道/比较正确的ID?

所以任何人都会帮助我,非常感谢。

5 个答案:

答案 0 :(得分:6)

您收到该错误是因为splice()是一个数组方法,而您的datas对象是一个字符串。您可能会将此与slice()方法混淆,后者确实是为字符串定义的。

因此,正如cale_b指出的那样,不需要对JSON对象进行字符串化。将其作为数组保留将为您提供更多功能。例如,如果要删除clients.data中的第二个元素,可以写:

$scope.clients["data"].splice(1, 1);

如果您想根据id属性删除值,而不是data数组中对象的位置,则可以使用indexOf()find()进行搜索。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Using_the_for_attribute方法,如下:

$scope.clients["data"].splice(
    $scope.clients["data"].indexOf(
        $scope.clients["data"].find(function(e) {
            return e.id == 2;
})), 1);

答案 1 :(得分:1)

你可以使用filter()

$scope.deleteRow = function() {
  var _id = 3;
      $scope.datas = JSON.stringify($scope.clients["data"]);
      $scope.datas.filter(item => item.id != _id);
};

答案 2 :(得分:1)

更新:我的答案涵盖了JSON最初是字符串的情况,因此使用fromJson()函数会将基于字符串的JSON转换为可用的JSON对象。关于删除,我的答案只包括按索引删除,而不是提供的ID,@ Danny的答案涵盖了。

使用splice()将无法工作,因为JSON本身无法访问Javascript数组函数。对此的解决方案是使用angular的fromJson()函数将其转换为可行的Javascript数组。

https://docs.angularjs.org/api/ng/function/angular.fromJson

使用fromJson()函数,我们可以将其应用于您的JSON:

$scope.datas= '{"count":3,"data": [{"id":"1","raison":"ABS","email":"abs@abs.com","tel":"021269999999"},{"id":"3","raison":"PODL","email":"abs@abs.com","tel":"021269999999"},{"id":"5","raison":"dDMS","email":"abs@abs.com","tel":"021269999999"}]}'

$scope.exampleArray = angular.fromJson($scope.datas);

这样做会将其转换并使其可用。从那里,您可以获取代码并对其进行一些修改,以便它可以与我们的新对象一起使用:

$scope.deleteRow = function() {
   var _id = 2; // Using 2 rather than 3 because of array indexes
   $scope.exampleArray.data.splice(_id,1);
};

之后,Angular还有一种方法可以使用其令人惊讶的命名对象将我们的对象转换回可用的JSON对象; toJson()

https://docs.angularjs.org/api/ng/function/angular.toJson

答案 3 :(得分:0)

在拼接对象之前,需要将数据设为javscript数组。或者不像你那样做字符串化。

使用Javascript:

   var index = 0;
   var myObj = {
  "count": 3,
  "data": [
    {
      "id": "1",
      "raison": "ABS",
      "email": "abs@abs.com",
      "tel": "021269999999"
    },
    {
      "id": "3",
      "raison": "PODL",
      "email": "abs@abs.com",
      "tel": "021269999999"
    }, {
      "id": "5",
      "raison": "dDMS",
      "email": "abs@abs.com",
      "tel": "021269999999"
    }
  ]
}

var newObj = JSON.parse(JSON.stringify(myObj));
newObj.data.splice(index, 1);

在上面的示例中,我将其设置为索引0但是对于您的情况,您需要找到要删除的对象的索引,然后创建索引。 splice()接受一个起始索引和一个结束索引,你要做的是传入一个id而不会工作。

答案 4 :(得分:0)

这里的问题源于splice只能在数组上调用。 JSON.stringify会将JavaScript对象转换为字符串,以便可以使用与JavaScript不同的其他语言进行传输和解析。

我假设$ scope.clients [“data”]是JavaScript格式。你可以通过控制台记录来测试它,并检查它是一个数组还是一个对象。

根据您提供的示例,这样的事情应该有效:

$scope.clients["data"].map(function(a){
    delete a.id;
    return a;
}

这将迭代数组中的每个项目并删除id属性。如果您还不熟悉JavaScript中的.map(),我建议您阅读它

编辑:Kevin Ternet使用过滤器和ES6箭头功能有一个非常优雅的解决方案,值得一看。过滤器可能是用于此类问题的更好功能