Trouble using indexOf on a complex array [duplicate]

Question

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.

Chin

Calling indexOf on an array is not cross-browser compatible. – Bogtrotter

@erturne - you're right - it's not even in IE8 - wow – Dieback

@erturne: It is not, but as stated on Mozilla Developer Network, it can be easily implemented even in older / deprecated browsers. – Hypothermia

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

Dieback

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". – Chin

@user1121506 - that won't work - stand by for another edit – Dieback

@user1121506 - edited - the code in your comment was 99.9% correct, you just needed a little tweak. – Dieback

Works brilliantly, thanks Adam and everyone else. – Chin

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' } ]

Tound

What if I want to find the index and remove the element ? – Omor

Simply return i.id !== 'b'; instead. – Tound

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/

Hodgkinson