Suppose I have this code:
var myArray = new Object();
myArray["firstname"] = "Bob";
myArray["lastname"] = "Smith";
myArray["age"] = 25;
Now if I wanted to remove "lastname"?....is there some equivalent of
myArray["lastname"].remove()?
(I need the element gone because the number of elements is important and I want to keep things clean.)
This question is related to
javascript
arrays
associative-array
associative
You are using Object, and you don't have an associative array to begin with. With an associative array, adding and removing items goes like this:
Array.prototype.contains = function(obj)
{
var i = this.length;
while (i--)
{
if (this[i] === obj)
{
return true;
}
}
return false;
}
Array.prototype.add = function(key, value)
{
if(this.contains(key))
this[key] = value;
else
{
this.push(key);
this[key] = value;
}
}
Array.prototype.remove = function(key)
{
for(var i = 0; i < this.length; ++i)
{
if(this[i] == key)
{
this.splice(i, 1);
return;
}
}
}
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
function ForwardAndHideVariables() {
var dictParameters = getUrlVars();
dictParameters.add("mno", "pqr");
dictParameters.add("mno", "stfu");
dictParameters.remove("mno");
for(var i = 0; i < dictParameters.length; i++)
{
var key = dictParameters[i];
var value = dictParameters[key];
alert(key + "=" + value);
}
// And now forward with HTTP-POST
aa_post_to_url("Default.aspx", dictParameters);
}
function aa_post_to_url(path, params, method) {
method = method || "post";
var form = document.createElement("form");
// Move the submit function to another variable
// so that it doesn't get written over if a parameter name is 'submit'
form._submit_function_ = form.submit;
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var i = 0; i < params.length; i++)
{
var key = params[i];
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
document.body.appendChild(form);
form._submit_function_(); // Call the renamed function
}
None of the previous answers address the fact that JavaScript does not have associative arrays to begin with - there is no array type as such, see typeof.
What JavaScript has, are object instances with dynamic properties. When properties are confused with elements of an Array object instance then Bad Things™ are bound to happen:
var elements = new Array()
elements.push(document.getElementsByTagName("head")[0])
elements.push(document.getElementsByTagName("title")[0])
elements["prop"] = document.getElementsByTagName("body")[0]
console.log("number of elements: ", elements.length) // Returns 2
delete elements[1]
console.log("number of elements: ", elements.length) // Returns 2 (?!)
for (var i = 0; i < elements.length; i++)
{
// Uh-oh... throws a TypeError when i == 1
elements[i].onmouseover = function () { window.alert("Over It.")}
console.log("success at index: ", i)
}
To have a universal removal function that does not blow up on you, use:
Object.prototype.removeItem = function (key) {
if (!this.hasOwnProperty(key))
return
if (isNaN(parseInt(key)) || !(this instanceof Array))
delete this[key]
else
this.splice(key, 1)
};
//
// Code sample.
//
var elements = new Array()
elements.push(document.getElementsByTagName("head")[0])
elements.push(document.getElementsByTagName("title")[0])
elements["prop"] = document.getElementsByTagName("body")[0]
console.log(elements.length) // Returns 2
elements.removeItem("prop")
elements.removeItem(0)
console.log(elements.hasOwnProperty("prop")) // Returns false as it should
console.log(elements.length) // returns 1 as it should
The only working method for me:
function removeItem (array, value) {
var i = 0;
while (i < array.length) {
if(array[i] === value) {
array.splice(i, 1);
} else {
++i;
}
}
return array;
}
Usage:
var new = removeItem( ["apple","banana", "orange"], "apple");
// ---> ["banana", "orange"]
While the accepted answer is correct, it is missing the explanation why it works.
First of all, your code should reflect the fact that this is not an array:
var myObject = new Object();
myObject["firstname"] = "Bob";
myObject["lastname"] = "Smith";
myObject["age"] = 25;
Note that all objects (including Arrays) can be used this way. However, do not expect for standard JavaScript array functions (pop, push, etc.) to work on objects!
As said in accepted answer, you can then use delete to remove the entries from objects:
delete myObject["lastname"]
You should decide which route you wish to take - either use objects (associative arrays / dictionaries) or use arrays (maps). Never mix the two of them.
Use method splice to completely remove an item from an object array:
Object.prototype.removeItem = function (key, value) {
if (value == undefined)
return;
for (var i in this) {
if (this[i][key] == value) {
this.splice(i, 1);
}
}
};
var collection = [
{ id: "5f299a5d-7793-47be-a827-bca227dbef95", title: "one" },
{ id: "87353080-8f49-46b9-9281-162a41ddb8df", title: "two" },
{ id: "a1af832c-9028-4690-9793-d623ecc75a95", title: "three" }
];
collection.removeItem("id", "87353080-8f49-46b9-9281-162a41ddb8df");
While the accepted answer is correct, it is missing the explanation why it works.
First of all, your code should reflect the fact that this is not an array:
var myObject = new Object();
myObject["firstname"] = "Bob";
myObject["lastname"] = "Smith";
myObject["age"] = 25;
Note that all objects (including Arrays) can be used this way. However, do not expect for standard JavaScript array functions (pop, push, etc.) to work on objects!
As said in accepted answer, you can then use delete to remove the entries from objects:
delete myObject["lastname"]
You should decide which route you wish to take - either use objects (associative arrays / dictionaries) or use arrays (maps). Never mix the two of them.
It's very straightforward if you have an Underscore.js dependency in your project -
_.omit(myArray, "lastname")
All objects in JavaScript are implemented as hashtables/associative arrays. So, the following are the equivalent:
alert(myObj["SomeProperty"]);
alert(myObj.SomeProperty);
And, as already indicated, you "remove" a property from an object via the delete keyword, which you can use in two ways:
delete myObj["SomeProperty"];
delete myObj.SomeProperty;
Hope the extra info helps...
We can use it as a function too. Angular throws some error if used as a prototype. Thanks @HarpyWar. It helped me solve a problem.
var removeItem = function (object, key, value) {
if (value == undefined)
return;
for (var i in object) {
if (object[i][key] == value) {
object.splice(i, 1);
}
}
};
var collection = [
{ id: "5f299a5d-7793-47be-a827-bca227dbef95", title: "one" },
{ id: "87353080-8f49-46b9-9281-162a41ddb8df", title: "two" },
{ id: "a1af832c-9028-4690-9793-d623ecc75a95", title: "three" }
];
removeItem(collection, "id", "87353080-8f49-46b9-9281-162a41ddb8df");
For "Arrays":
If you know the index:
array.splice(index, 1);
If you know the value:
function removeItem(array, value) {
var index = array.indexOf(value);
if (index > -1) {
array.splice(index, 1);
}
return array;
}
The most upvoted answer for delete works well in case of objects but not for the real arrays. If I use delete it removes elements from loops but keeps the element as empty and length of array wont change. This may be a problem in some scenarios.
For example, if I do myArray.toString() on myArray after removal via delete, it creates an empty entry, i.e. ,,.
You are using Object, and you don't have an associative array to begin with. With an associative array, adding and removing items goes like this:
Array.prototype.contains = function(obj)
{
var i = this.length;
while (i--)
{
if (this[i] === obj)
{
return true;
}
}
return false;
}
Array.prototype.add = function(key, value)
{
if(this.contains(key))
this[key] = value;
else
{
this.push(key);
this[key] = value;
}
}
Array.prototype.remove = function(key)
{
for(var i = 0; i < this.length; ++i)
{
if(this[i] == key)
{
this.splice(i, 1);
return;
}
}
}
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
function ForwardAndHideVariables() {
var dictParameters = getUrlVars();
dictParameters.add("mno", "pqr");
dictParameters.add("mno", "stfu");
dictParameters.remove("mno");
for(var i = 0; i < dictParameters.length; i++)
{
var key = dictParameters[i];
var value = dictParameters[key];
alert(key + "=" + value);
}
// And now forward with HTTP-POST
aa_post_to_url("Default.aspx", dictParameters);
}
function aa_post_to_url(path, params, method) {
method = method || "post";
var form = document.createElement("form");
// Move the submit function to another variable
// so that it doesn't get written over if a parameter name is 'submit'
form._submit_function_ = form.submit;
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var i = 0; i < params.length; i++)
{
var key = params[i];
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
document.body.appendChild(form);
form._submit_function_(); // Call the renamed function
}
There is an elegant way in the Airbnb Style Guide to do this (ECMAScript 7):
const myObject = {
a: 1,
b: 2,
c: 3
};
const { a, ...noA } = myObject;
console.log(noA); // => { b: 2, c: 3 }
Copyright: https://codeburst.io/use-es2015-object-rest-operator-to-omit-properties-38a3ecffe90
As other answers have noted, you are not using a JavaScript array, but a JavaScript object, which works almost like an associative array in other languages except that all keys are converted to strings. The new Map stores keys as their original type.
If you had an array and not an object, you could use the array's .filter function, to return a new array without the item you want removed:
var myArray = ['Bob', 'Smith', 25];
myArray = myArray.filter(function(item) {
return item !== 'Smith';
});
If you have an older browser and jQuery, jQuery has a $.grep method that works similarly:
myArray = $.grep(myArray, function(item) {
return item !== 'Smith';
});
We can use it as a function too. Angular throws some error if used as a prototype. Thanks @HarpyWar. It helped me solve a problem.
var removeItem = function (object, key, value) {
if (value == undefined)
return;
for (var i in object) {
if (object[i][key] == value) {
object.splice(i, 1);
}
}
};
var collection = [
{ id: "5f299a5d-7793-47be-a827-bca227dbef95", title: "one" },
{ id: "87353080-8f49-46b9-9281-162a41ddb8df", title: "two" },
{ id: "a1af832c-9028-4690-9793-d623ecc75a95", title: "three" }
];
removeItem(collection, "id", "87353080-8f49-46b9-9281-162a41ddb8df");
It's very straightforward if you have an Underscore.js dependency in your project -
_.omit(myArray, "lastname")
Use method splice to completely remove an item from an object array:
Object.prototype.removeItem = function (key, value) {
if (value == undefined)
return;
for (var i in this) {
if (this[i][key] == value) {
this.splice(i, 1);
}
}
};
var collection = [
{ id: "5f299a5d-7793-47be-a827-bca227dbef95", title: "one" },
{ id: "87353080-8f49-46b9-9281-162a41ddb8df", title: "two" },
{ id: "a1af832c-9028-4690-9793-d623ecc75a95", title: "three" }
];
collection.removeItem("id", "87353080-8f49-46b9-9281-162a41ddb8df");
All objects in JavaScript are implemented as hashtables/associative arrays. So, the following are the equivalent:
alert(myObj["SomeProperty"]);
alert(myObj.SomeProperty);
And, as already indicated, you "remove" a property from an object via the delete keyword, which you can use in two ways:
delete myObj["SomeProperty"];
delete myObj.SomeProperty;
Hope the extra info helps...
var myArray = newmyArray = new Object();
myArray["firstname"] = "Bob";
myArray["lastname"] = "Smith";
myArray["age"] = 25;
var s = JSON.stringify(myArray);
s.replace(/"lastname[^,}]+,/g, '');
newmyArray = JSON.parse(p);
Without looping/iterates we get the same result.
You can remove an entry from your map by explicitly assigning it to 'undefined'. As in your case:
myArray["lastname"] = undefined;
None of the previous answers address the fact that JavaScript does not have associative arrays to begin with - there is no array type as such, see typeof.
What JavaScript has, are object instances with dynamic properties. When properties are confused with elements of an Array object instance then Bad Things™ are bound to happen:
var elements = new Array()
elements.push(document.getElementsByTagName("head")[0])
elements.push(document.getElementsByTagName("title")[0])
elements["prop"] = document.getElementsByTagName("body")[0]
console.log("number of elements: ", elements.length) // Returns 2
delete elements[1]
console.log("number of elements: ", elements.length) // Returns 2 (?!)
for (var i = 0; i < elements.length; i++)
{
// Uh-oh... throws a TypeError when i == 1
elements[i].onmouseover = function () { window.alert("Over It.")}
console.log("success at index: ", i)
}
To have a universal removal function that does not blow up on you, use:
Object.prototype.removeItem = function (key) {
if (!this.hasOwnProperty(key))
return
if (isNaN(parseInt(key)) || !(this instanceof Array))
delete this[key]
else
this.splice(key, 1)
};
//
// Code sample.
//
var elements = new Array()
elements.push(document.getElementsByTagName("head")[0])
elements.push(document.getElementsByTagName("title")[0])
elements["prop"] = document.getElementsByTagName("body")[0]
console.log(elements.length) // Returns 2
elements.removeItem("prop")
elements.removeItem(0)
console.log(elements.hasOwnProperty("prop")) // Returns false as it should
console.log(elements.length) // returns 1 as it should
You can remove an entry from your map by explicitly assigning it to 'undefined'. As in your case:
myArray["lastname"] = undefined;
For "Arrays":
If you know the index:
array.splice(index, 1);
If you know the value:
function removeItem(array, value) {
var index = array.indexOf(value);
if (index > -1) {
array.splice(index, 1);
}
return array;
}
The most upvoted answer for delete works well in case of objects but not for the real arrays. If I use delete it removes elements from loops but keeps the element as empty and length of array wont change. This may be a problem in some scenarios.
For example, if I do myArray.toString() on myArray after removal via delete, it creates an empty entry, i.e. ,,.
That only deletes the object, but it still keeps the array length the same.
To remove the element from the array, you need to do something like:
array.splice(index, 1);
By using the "delete" keyword, it will delete the array element from array in JavaScript.
For example,
Consider following statements.
var arrayElementToDelete = new Object();
arrayElementToDelete["id"] = "XERTYB00G1";
arrayElementToDelete["first_name"] = "Employee_one";
arrayElementToDelete["status"] = "Active";
delete arrayElementToDelete["status"];
The last line of the code will remove the array element whose key is "status" from the array.
var myArray = newmyArray = new Object();
myArray["firstname"] = "Bob";
myArray["lastname"] = "Smith";
myArray["age"] = 25;
var s = JSON.stringify(myArray);
s.replace(/"lastname[^,}]+,/g, '');
newmyArray = JSON.parse(p);
Without looping/iterates we get the same result.
If, for whatever reason, the delete key is not working (like it wasn't working for me), you can splice it out and then filter the undefined values:
// To cut out one element via arr.splice(indexToRemove, numberToRemove);
array.splice(key, 1)
array.filter(function(n){return n});
Don’t try and chain them since splice returns removed elements;
All objects in JavaScript are implemented as hashtables/associative arrays. So, the following are the equivalent:
alert(myObj["SomeProperty"]);
alert(myObj.SomeProperty);
And, as already indicated, you "remove" a property from an object via the delete keyword, which you can use in two ways:
delete myObj["SomeProperty"];
delete myObj.SomeProperty;
Hope the extra info helps...
As other answers have noted, you are not using a JavaScript array, but a JavaScript object, which works almost like an associative array in other languages except that all keys are converted to strings. The new Map stores keys as their original type.
If you had an array and not an object, you could use the array's .filter function, to return a new array without the item you want removed:
var myArray = ['Bob', 'Smith', 25];
myArray = myArray.filter(function(item) {
return item !== 'Smith';
});
If you have an older browser and jQuery, jQuery has a $.grep method that works similarly:
myArray = $.grep(myArray, function(item) {
return item !== 'Smith';
});
The only working method for me:
function removeItem (array, value) {
var i = 0;
while (i < array.length) {
if(array[i] === value) {
array.splice(i, 1);
} else {
++i;
}
}
return array;
}
Usage:
var new = removeItem( ["apple","banana", "orange"], "apple");
// ---> ["banana", "orange"]
All objects in JavaScript are implemented as hashtables/associative arrays. So, the following are the equivalent:
alert(myObj["SomeProperty"]);
alert(myObj.SomeProperty);
And, as already indicated, you "remove" a property from an object via the delete keyword, which you can use in two ways:
delete myObj["SomeProperty"];
delete myObj.SomeProperty;
Hope the extra info helps...
If, for whatever reason, the delete key is not working (like it wasn't working for me), you can splice it out and then filter the undefined values:
// To cut out one element via arr.splice(indexToRemove, numberToRemove);
array.splice(key, 1)
array.filter(function(n){return n});
Don’t try and chain them since splice returns removed elements;
There is an elegant way in the Airbnb Style Guide to do this (ECMAScript 7):
const myObject = {
a: 1,
b: 2,
c: 3
};
const { a, ...noA } = myObject;
console.log(noA); // => { b: 2, c: 3 }
Copyright: https://codeburst.io/use-es2015-object-rest-operator-to-omit-properties-38a3ecffe90
That only deletes the object, but it still keeps the array length the same.
To remove the element from the array, you need to do something like:
array.splice(index, 1);
Source: Stackoverflow.com