Trouble using indexOf on a complex array

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.

Calling indexOf on an array is not cross-browser compatible. — erturne, Dec 29 '11 at 16:39
@erturne: It is not, but [as stated on Mozilla Developer Network](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf), it can be easily implemented even in older / deprecated browsers. — Tadeck, Dec 29 '11 at 16:46

Adam Rackis · Accepted Answer · 2011-12-29T16:56:32.123

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

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". — Nick, Dec 29 '11 at 16:47
@user1121506 - edited - the code in your comment was 99.9% correct, you just needed a little tweak. — Adam Rackis, Dec 29 '11 at 16:56

score 2 · Answer 2 · answered Dec 30 '11 at 07:32

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

answered Dec 30 '11 at 07:32

NiKo

11,215
6
46
56

What if I want to find the index and remove the element ? – Manasvi Sareen Feb 19 '16 at 08:51
1

Simply `return i.id !== 'b';` instead. – NiKo Feb 20 '16 at 13:33

score -1 · Answer 3 · answered Dec 29 '11 at 16:40

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/

Trouble using indexOf on a complex array

3 Answers3

Linked

Related