Trouble using indexOf on a complex array [duplicate]

Question

This question already has answers here:

Closed 13 years ago.

Possible Duplicate:
indexOf method in an object array?

I have a javascript array which follows this format:

var arrayName = [
{id: "a", gender: "man", item: "stuff"},
{id: "b", gender: "woman", item: "stuff"},
{id: "c", gender: "man", item: "stuff"},
{id: "d", gender: "man", item: "stuff"}
];

Is there a way that I can use array.indexOf to find an index in the array, when for example I know the "id" variable.

For example I tried;

var position = arrayName.indexOf("b");
arrayName[position].gender = "man"

At the moment I am using;

for(var i=0; i<arrayName.length; i++) {
 if(arrayName[i].id == "b"){
 arrayName[i].gender = "man";
 }
}

This second technique works but the actual array I am using has 150 entries and 10 items in each entry so looping through it all seems very wasteful when I know the "id" of the entry I want to edit. indexOf would be a much cleaner approach if I can get it working.

• Eric Turner: Calling indexOf on an array is not cross-browser compatible.
• Adam Rackis: @erturne - you're right - it's not even in IE8 - wow
• Tadeck: @erturne: It is not, but as stated on Mozilla Developer Network, it can be easily implemented even in older / deprecated browsers.

Answer 1

Your call to indexOf is checking the objects in your array against the string b, which will never work.

Looping through the array elements to find the right id is a simple solution.

Or, you could make your own indexOf function:

Array.prototype.indexOfId = function(id) {
 for (var i = 0; i < this.length; i++)
 if (this[i].id === id)
 return i;
 return -1;
}
 var arrayName = [
 { id: "a", gender: "man", item: "stuff" },
 { id: "b", gender: "woman", item: "stuff" },
 { id: "c", gender: "man", item: "stuff" },
 { id: "d", gender: "man", item: "stuff" }];
 var position = arrayName.indexOfId("b");
 alert(position); //alerts 1

Here's a fiddle

EDIT

If you want to compare your array elements to any property, here's how you do it (note that I'm using [] syntax to get an arbitrary property)

 Array.prototype.indexOfField = function (propertyName, value) {
 for (var i = 0; i < this.length; i++)
 if (this[i][propertyName] === value)
 return i;
 return -1;
 }
 var position = arrayName.indexOfField("id", "b");
 alert(position); //alerts 1
 position = arrayName.indexOfField("gender", "man");
 alert(position); //alerts 0

---

Or, if you don't want to mess with Array's prototype, and you don't mind using features not present in older browsers, you could use Array's filter function

var position = arrayName.indexOf(arrayName.filter(function (val) {
 return val.id === "b";
})[0]);

Note that this function is not present in IE8, and so to support this browser you'd have to grab the shim from MDN

EDIT - oops, indexOf isn't friendly toward old browsers either. If you opt for this second bit of code and wanted to support IE, you'd also have to grab the shim for indexOf from here

• Nick: Thanks Adam, that is what I suspected. I will probably go ahead and use a variation of your prototype.indexOfId technique as these kind of edits are quite common so it will be cleaner to reference to one single prototype function. My variation will probably be to: Array.prototype.indexOfId = function(variable,value) { for (var i = 0; i < this.length; i++) if (this[i].variable === value) return i; return -1; } This way I can use it to search for more than just the "id" variable E.g. if I wanted to edit the "id" based on the "gender".
• Adam Rackis: @user1121506 - that won't work - stand by for another edit
• Adam Rackis: @user1121506 - edited - the code in your comment was 99.9% correct, you just needed a little tweak.
• Nick: Works brilliantly, thanks Adam and everyone else.

Answer 2

If you have the opportunity to, you can use Array.prototype.filter:

var arrayName = [
 {id: "a", gender: "man", item: "stuff"},
 {id: "b", gender: "woman", item: "stuff"},
 {id: "c", gender: "man", item: "stuff"},
 {id: "d", gender: "man", item: "stuff"}
];
console.log(arrayName.filter(function(i) {
 return i.id === 'b';
}));

Which will give:

[ { id: 'b', gender: 'woman', item: 'stuff' } ]

• Manasvi Sareen: What if I want to find the index and remove the element ?
• NiKo: Simply return i.id !== 'b'; instead.

Answer 3

you can override indexOf using prototype

Array.prototype.indexOf = function(elem) {
 for (var i = 0; i < this.length; i++){
 if (this[i].id === elem)
 return i;
 }
 return -1;
}
var arrayName = [
{id: "a", gender: "man", item: "stuff"},
{id: "b", gender: "woman", item: "stuff"},
{id: "c", gender: "man", item: "stuff"},
{id: "d", gender: "man", item: "stuff"}
];
alert(arrayName.indexOf("b"));

fiddle : http://jsfiddle.net/r8rp9/1/