CODEWITHSUNDEEP
javascriptjson
EHerman
EHerman

Reputation: 1892

Delete data from json array

I am trying to remove a piece of a 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"
                }
            ]
        }
        ]
    }

Say I wanted to remove the a product out of the bathroom category on the click of a button. How would I acheive this?

I have been trying this to no avail:

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

error I am receiving:

Uncaught TypeError: Object # has no method 'splice'

Upvotes: 9

Views: 73208

Answers (3)

Eric Herlitz
Eric Herlitz

Reputation: 26267

I would most likely built a prototype method for this that makes the command a bit more simple 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 around with the data in a very flexible way.

== EDIT ==

Maybe it was to flexible as Blue Skies pointed out. Updated example below. My style would be to add the favorites json to an object literal and include the methods you need in the literal. This example consists of the

  • JSON Data
  • a method to cut elements based on index
  • a method to get a favorite based on index
  • a method to return a favorite based on parameter name-value

Snippet

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 the find simply do something like this

favorites.find("Bathroom", "name")

Upvotes: 2

Maciej Sz
Maciej Sz

Reputation: 12035

To unset any variable use the delete statement:

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

This is correct way, and it will work, but if your goal is to preserve indexes in order, then your way with the splice method is the way to go:

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

The above will remove one element (second parameter) starting at 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);

See your code on JsFiddle.

You can take additional measures to protect the code in case the array is not set or empty:

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

Upvotes: 17

jfriend00
jfriend00

Reputation: 707328

If you want to actually remove an item from the array so that all items after it in the array move down to lower indexes, you would use something like this:

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

You want to operate on the actual items array which means calling methods on the items array. For .splice(), you pass the index where you want to start modifying the array and then the number of items to remove thus .splice(1, 1) which will remove 1 item starting at index 1.

Upvotes: 4

Related Questions