CODEWITHSUNDEEP
javascriptjqueryarrays
user2071152
user2071152

Reputation: 1195

remove array element using javascript

I am new to javascript & jquery, Need to remove an element from the below array structure

[{
    "tag": "tag1",
    "description": "description1"
}, {
    "tag": "tag2",
    "description": "description2"
}, {
    "tag": "tag3",
    "description": "description3"
}]

The element to be removed is known {"tag":"tag2", "description":"description2"}.

How can i find this element and remove from the array.

Please find the code which i am using to remove an element

var actionDic = [];

actionDic.push({
    description: desc,
    tag: tag
});

The actionDic array is populated as user enter text in textinput and selects 'add' option.

var deleterow = {
    tag: "tag2",
    description: "description2"
};
var index = $.inArray(deleterow, actionDic);
if (index != -1) {
    actionDic.splice(index, 1);
}

The correct index is not obtained. Kindly let me know what wrong is in the code.

Thanks.

Upvotes: 0

Views: 156

Answers (5)

Ja͢ck
Ja͢ck

Reputation: 173542

Since the comparison between the item to remove and each element in actionDic isn't trivial, you could use jQuery.grep():

actionDic = jQuery.grep(actionDic, function(elem) {
    return elem.tag == deleterow.tag && elem.description == deleterow.description;
}, true);

Demo

It performs a search using a custom search function and returns the array elements that didn't match. The result replaces the previous value of actionDic and effectively removed that one item.

Update

Unfortunately, this method could be considered heavy because a new array gets created at each invocation; both in terms of what jQuery can do and standard JavaScript functionality, this particular feature is lacking. ECMAScript 6 will have the Array.prototype.find() method that will do the job of finding the index in an array (with which you can perform the splice).

You can of course write one yourself too:

(function($) {
  $.find = function(arr, fn) {
    for (var i = 0, len = arr.length; i < len; ++i) {
      if (fn(arr[i], i, arr)) {
        return i;
      }
    }
    return -1;
  };
}(jQuery));

var index = $.find(actionDic, function(elem) {
  return elem.tag == deleterow.tag && elem.description == deleterow.description;
});

if (index != -1) {
  actionDic.splice(index, 1);
}

Demo

Upvotes: 2

Artur Boruński
Artur Boruński

Reputation: 537

You can use underscore.js which contains many useful helpers for Objects, Arrays etc.

Removing array element:

array = _.reject(array, function(item) {
 return item.tag == 'tag2'; // <- if tag is unique to whole array
});

Upvotes: -1

StaticVoid
StaticVoid

Reputation: 1537

This gets your inner array objects:

for (var x = 0; x < actionDic.length; x++){
    var arrayItem = actionDic[x];
    if (arrayItem["tag"] == "tag2"){
        alert(arrayItem["description"]);
    }
}

Working fiddle: http://jsfiddle.net/4khjp/

Upvotes: -1

Karlen Kishmiryan
Karlen Kishmiryan

Reputation: 7522

I've implemented an indexOfObject method of Array prototype in one of my projects. It searches for an index of object by the given property name and value. Here it is:

Array.prototype.indexOfObject = function(searchTerm, property) {
    for (var i = 0, l = this.length; i < l; i++) {
        if (this[i][property] === searchTerm) {
            return i;
        }
    }

    return -1;
};

You can use this method to find the index of your object using a unique property. In your case you can use it like this:

var arr = [{
    "tag": "tag1",
    "description": "description1"
}, {
    "tag": "tag2",
    "description": "description2"
}, {
    "tag": "tag3",
    "description": "description3"
}], deleteObject = {
    tag: "tag2",
    description: "description2"
};

var index = arr.indexOfObject(deleteObject.tag, 'tag');

Then you can use that index to remove the object from the array:

if (index > -1) {
   arr.splice(index, 1);
}

Here is the working example in JSFiddle.

Upvotes: 2

Harpreet Singh
Harpreet Singh

Reputation: 2671

var actionDic = [{
    "tag": "tag1",
    "description": "description1"
}, {
    "tag": "tag2",
    "description": "description2"
}, {
    "tag": "tag3",
    "description": "description3"
}]

var element = {"tag":"tag2", "description":"description2"}

for(var i=0;i<actionDic.length;i++) {
    var found = false;
    for(each in actionDic[i]) {
        if(actionDic[i][each] == element[each]) {
            found = true
        } else {
            found = false;
            break;
        }
    }
    if(found) {
        actionDic.splice(i,1);
        found=false;
    }
}

Upvotes: -1

Related Questions