Remove item from json file using angularjs

Question

I lost a lot of time trying to delete a item from Json file

This is my json file

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

in controller I have like this

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

so i gave _id that i want to remove but i get this error $scope.datas.splice splice not a function, i tried a simple file it worked fine ["aaa","bob,"ccc"] using indexof() and splice but in this file json non :(

How in javascript can Know/compare the right id ?

so anyone help me , and thanks a lot .

Answer 1

You're getting that error because splice() is an array method, while your datas object is a string. You might be confusing this with the slice() method, which is indeed defined for strings.

So, as cale_b pointed out, there is no need to stringify your JSON object. Leaving it as an array will give you much more functionality. For example, if you want to remove the second element in clients.data, you can write:

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

And if you wanted to remove the value based on the id property, and not the position of the object in the data array, you can search for it using the indexOf() and find() methods, like so:

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

Answer 2

Update: My answer covers a case where your JSON is a string initially, so using the fromJson() function will convert a string-based JSON into a workable JSON object. In regards to the deletion, my answer only covers deletion by index, not by provided id, @Danny's answer covers that.

Using splice() will not work since the JSON itself doesn't have access to Javascript array functions. A solution to this would be using angular's fromJson() function which will convert it into a workable Javascript array.

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

Using the fromJson() function we can apply this to your 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);

Doing that will convert it and make it usable. From there, you can take your code and modify it a little bit so that it will work with our new object:

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

Afterwards Angular also has a way to convert our object back into a usable JSON object using its suprisingly named counter-part; toJson()

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

Answer 3

Your problem here originates with the fact that splice can only be called on arrays. JSON.stringify will convert a JavaScript object to a string so it can be tranferred and parsed by other languages that don't use the same syntax as JavaScript.

I'm assuming $scope.clients["data"] is in JavaScript format. you can test this by console logging and checking if it's an array or an object.

Based on the example you gave, something like this should work:

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

This will iterate through each item in the array and delete the id attribute. If you're not already familiar with .map() in JavaScript, I advise you read up on it

EDIT: Kevin Ternet has quite an elegant solution using filter and ES6 arrow functions which is well worth a look at. Filter is possibly a better function to use on this kind of problem

Answer 4

You need to make data a javscript array before you can splice out an object. Or dont stringify like your doing.

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

In my above example I have it set to index 0 but for your case you would need to find the index of the object you want to remove and then make index that. splice() accepts a start index and an end index, what you are trying to do is pass in an id and that wont work.

Answer 5

you can use filter()

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