Geek Answers Handbook

Delete data from json array

I am trying to remove a piece of data from a json array. For example, I have this array

var favorites = { "userID": "12345678", "favorites": [ { "name" : "My Favorites", "id" : "87654321", "items": [ { "productID": "11234567", "added": "TIMESTAMP", "title": "Project", "type": "Weekend Project", "imageURL": "1" }, { "productID": "11223456", "added": "TIMESTAMP", "title": "Bathroom", "type": "Weekend Project", "imageURL": "2" }, { "productID": "11223345", "added": "TIMESTAMP", "title": "Curves", "type": "Collections", "imageURL": "3" } ] }, { "name" : "Bathroom", "id" : "87654323", "items": [ { "productID": "11122224", "added": "TIMESTAMP", "title": "Project", "type": "Weekend Project", "imageURL": "1" }, { "productID": "11122222", "added": "TIMESTAMP", "title": "Room", "type": "Weekend Project", "imageURL": "2" }, { "productID": "11112222", "added": "TIMESTAMP", "title": "Strais", "type": "Collections", "imageURL": "3" }, { "productID": "11111222", "added": "TIMESTAMP", "title": "Door", "type": "Collections", "imageURL": "4" } ] } ] }

Let's say I wanted to remove a product from the bathroom category with the click of a button. How would I understand that?

I tried this to no avail:

 jQuery(document).on('click', ".removeFav", function() { favorites.favorites[1].items[1].splice(); }

The error I am getting is:

Uncaught TypeError: Object # does not have a 'splice' method

+6
source share
3 answers

To disable any variable, use the delete operator:

 delete favorites.favorites[1].items[1]

This is the correct way, and it will work, but if your goal is to keep the indexes in order, then your path using the splice method is the path:

 favorites.favorites[1].items.splice(1,1);

The above item will delete one item (second parameter), starting from the 1st index (first parameter).

So, to be clear: to remove the last element, use this:

 var arr = favorites.favorites[1].items; arr.splice(arr.length - 1, 1);

Take a look at your JsFiddle code .

You can take additional measures to protect the code if the array is not installed or empty:

 var arr = favorites.favorites[1].items; if ( arr && arr.length ) { arr.splice(arr.length - 1, 1); }
+14
source

If you want to remove an element from the array so that all the elements after it in the array move down to the lower indices, you should use something like this:

 favorites.favorites[1].items.splice(1, 1);

You want to work with the actual items array, which means the calling methods in the items array. For .splice() you pass the index to which you want to start changing the array, and then the number of elements to delete, thus .splice(1, 1) , which will remove 1 element starting at index 1.

+3
source

I would most likely build a prototype method for this, which makes the command easier to use.

 // Place anywhere Object.prototype.cut = function(start, elements){ return this.items.splice(start, elements); } // Call using this favorites.favorites[1].cut(1,1);

This way you can extend methods and play with data in a very flexible way.

== EDIT ==

Perhaps it was flexible, as noted by Blue Skies. Updated example below. My style would be to add json favorites to the object literal and include the methods you need in the literal. This example consists of

  • JSON data
  • index based element cutting method
  • method for getting index-based favorites
  • method for returning a favorite based on the value of the name parameter

Excerpt

 var favorites = { data: { "userID": "12345678", "favorites": [{ "name": "My Favorites", "id": "87654321", "items": [{ "productID": "11234567", "added": "TIMESTAMP", "title": "Project", "type": "Weekend Project", "imageURL": "1" }, { "productID": "11223456", "added": "TIMESTAMP", "title": "Bathroom", "type": "Weekend Project", "imageURL": "2" }, { "productID": "11223345", "added": "TIMESTAMP", "title": "Curves", "type": "Collections", "imageURL": "3" }] }, { "name": "Bathroom", "id": "87654323", "items": [{ "productID": "11122224", "added": "TIMESTAMP", "title": "Project", "type": "Weekend Project", "imageURL": "1" }, { "productID": "11122222", "added": "TIMESTAMP", "title": "Room", "type": "Weekend Project", "imageURL": "2" }, { "productID": "11112222", "added": "TIMESTAMP", "title": "Strais", "type": "Collections", "imageURL": "3" }, { "productID": "11111222", "added": "TIMESTAMP", "title": "Door", "type": "Collections", "imageURL": "4" }] }] }, cut: function(favorite, start, elements) { return this.data.favorites[favorite].items.splice(start, elements); }, get: function(favorite) { return this.data.favorites[favorite]; }, find: function(value, param) { var found; this.data.favorites.filter(function(item, i) { if (item[param] === value) { found = item; return; }; }) return found; } };

To use find, just do something like this

 favorites.find("Bathroom", "name")
+2
source

More articles:


All Articles