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": "[email protected]",
      "tel": "021269999999"
    },
    {
      "id": "3",
      "raison": "PODL",
      "email": "[email protected]",
      "tel": "021269999999"
    }, {
      "id": "5",
      "raison": "dDMS",
      "email": "[email protected]",
      "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 .

You've got a few problems: First, that's not the JSON file, that's an object. Second, you don't cast it to JSON until your deleteRow function, right before you try and use splice. Third - don't use JSON unless you have to send data via AJAX or other methods that require passing a STRING. Javascript objects are far easier to work with. Here's a JSFiddle that gives you the building blocks: jsfiddle.net/cale_b/v187d45d — random_user_name
– random_user_name, Commented Sep 1, 2016 at 21:34

Danny Buonocore · Accepted Answer · 2016-09-02 13:44:13Z

7

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

edited Sep 2, 2016 at 13:44

answered Sep 1, 2016 at 21:15

Danny Buonocore

3,7774 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

random_user_name Over a year ago

Yes, and that can be done before JSON.stringify() is called. In fact, given OP's question, there's no need to stringify at all, right?

Danny Buonocore Over a year ago

Yes I should have mentioned that... updating post.

kevin ternet · Accepted Answer · 2016-09-01 21:17:05Z

1

you can use filter()

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

answered Sep 1, 2016 at 21:17

kevin ternet

4,6322 gold badges21 silver badges27 bronze badges

3 Comments

random_user_name Over a year ago

Does filter operate on a string? Or an array?

Samuel Toh Over a year ago

I don't believe this will work. Filter is a method for array not String and note that JSON.stringify returns you a string.

Andriy Over a year ago

filter function cannot be applied to a string (as was mentioned already), but we can use it with arrays. Assuming that $scope.datas is an array (if not, we can use something like JSON.parse or angular.fromJson), we can use filter function. Since, filter() does not change the original array, we need to assign it to itself: $scope.datas.filter(item => item.id != _id);

Lucas L · Accepted Answer · 2016-09-02 13:00:14Z

1

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":"[email protected]","tel":"021269999999"},{"id":"3","raison":"PODL","email":"[email protected]","tel":"021269999999"},{"id":"5","raison":"dDMS","email":"[email protected]","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

edited Sep 2, 2016 at 13:00

answered Sep 1, 2016 at 21:24

Lucas L

1311 silver badge8 bronze badges

4 Comments

random_user_name Over a year ago

Why fromJson() when the OP has it in javascript object form to begin with?

Lucas L Over a year ago

Using fromJson() would seem to work best in a situation where we have a json which would typically just be one giant string, especially when it is coming from an external file as just text. Merely offering an alternative, Angular based solution.

Danny Buonocore Over a year ago

Just to be clear, you can indeed perform array functions on JSON objects, see jsfiddle.net/h91moeap. Also, this does not seem to line up exactly with what the OP is trying to accomplish, since id does not necessarily coincide with the index of the array.

Lucas L Over a year ago

@DannyBuonocore I do realize that you can perform array functions on JSON objects, however, I typically deal with JSON's as giant strings so having that initial conversion into a JSON object was what i was covering here. Updating my answer for the id portion.

Ohjay44 · Accepted Answer · 2016-09-01 21:17:34Z

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": "[email protected]",
      "tel": "021269999999"
    },
    {
      "id": "3",
      "raison": "PODL",
      "email": "[email protected]",
      "tel": "021269999999"
    }, {
      "id": "5",
      "raison": "dDMS",
      "email": "[email protected]",
      "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.

Luke K · Accepted Answer · 2016-09-01 21:18:14Z

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

Collectives™ on Stack Overflow

Remove item from json file using angularjs

5 Answers 5

2 Comments

3 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related