Javascript indexOf on an array of objects

Question

if I have an array like:

var myArray = [
                {
                    'color':'red',
                    'name': 'redName'
                },
                {
                    'color':'blue',
                    'name': 'blueName'
                },
                {
                    'color':'green',
                    'name': 'greenName'
                    },
                {
                    'color':'yellow',
                    'name': 'yellowName'
                },
             ];

How do I get the index of say, "blue"?

Gustavo Rodrigues · Accepted Answer · 2013-06-18 19:46:05Z

73

If you're already using ECMAScript 5 in your code you can use that:

myArray
    .map(function (element) {return element.color;})
    .indexOf('blue');

Note that the support to these functions is a quite limited (they don't work on Internet Explorer 8).

Also, if you're in the future, and you're using ES6 you can do that:

myArray.map((el) => el.color).indexOf('blue');

That's the same as above, but smaller.

answered Jun 18, 2013 at 19:46

Gustavo Rodrigues

3,7351 gold badge27 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DariusVE Over a year ago

this is an elegant solution

Madivad Over a year ago

"if you're in the future" kudos!

Gustavo Rodrigues Over a year ago

There is a function which simplifies more the code above: myArray.findIndex(el => el.color === 'blue'); It's supported on many modern browsers.

John Strickler · Accepted Answer · 2017-08-14 18:41:25Z

54

for(var i = 0; i < myArray.length; i++) {
   if(myArray[i].color === 'blue') {
     return i;
   }
}

There's no "clean" way unless you want to involve a third-party library. Underscore is a good one for stuff like this.

edited Aug 14, 2017 at 18:41

answered Nov 29, 2011 at 15:32

John Strickler

25.4k5 gold badges55 silver badges70 bronze badges

3 Comments

Anderson Green Over a year ago

The link in this answer is broken now.

John Strickler Over a year ago

@AndersonGreen fixed, thank you! also, this answer is pretty old. I recommend Lodash now. ES5 also provides a native find() implementation to the Array prototype.

Anthony Over a year ago

Would be great if you could add the Lodash function for it

Aleksandr Strutynskyy · Accepted Answer · 2016-07-19 06:42:50Z

43

I know this is super old but Javascript es6 has an awesome method Array.prototype.findIndex(), so you could just do:

let index = myArray.findIndex((item) => item.color === 'blue');
// value of index will be "1"

edited Jul 19, 2016 at 6:42

answered Jul 19, 2016 at 6:24

Aleksandr Strutynskyy

4314 silver badges3 bronze badges

1 Comment

Bullsized Over a year ago

and if there's no 'blue' color, the value will be -1 <- use this if you need to make any checks based on the index itself

Guffa · Accepted Answer · 2011-11-29 15:30:56Z

11

That's not a multi-dimensional array (or even a jagged array, which is used instead of multi-dimensional arrays in Javascript as they don't exist). That is an array of objects.

You can loop through the items in the array:

var index;
for (var i = 0; i < myArray.length; i++) {
  if (myArray[i].color == 'blue') {
    index = i;
    break;
  }
}

Now the variable index contains the value 1, with your given example.

answered Nov 29, 2011 at 15:30

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

Webby · Accepted Answer · 2017-07-07 07:28:12Z

6

You can use .findIndex() method

In your case

var findeMe = "blue";
myArray.findIndex(function(row){
return row.color == findMe;
});

I hope it help.

answered Jul 7, 2017 at 7:28

Webby

3333 silver badges5 bronze badges

Comments

CrayonViolent · Accepted Answer · 2011-11-29 15:31:44Z

I'm guessing you mean from your example to return "1"? Here is a function for you...

<script type='text/javascript'>
var myArray = [
                {
                    'color':'red',
                    'name': 'redName'
                },
                {
                    'color':'blue',
                    'name': 'blueName'
                },
                {
                    'color':'green',
                    'name': 'greenName'
                    },
                {
                    'color':'yellow',
                    'name': 'yellowName'
                },
             ];
function getIndexOf(a,v) {
  var l = a.length;
  for (var k=0;k<l;k++) {
    if (a[k].color==v) {
        return k;
      }
  }                      
  return false;
}

alert (getIndexOf(myArray,'blue'));
</script>

mplungjan · Accepted Answer · 2012-10-18 20:33:03Z

2

For example like this:

DEMO

Array.prototype.objIndexOf = function(val) {
    var cnt =-1;
    for (var i=0, n=this.length;i<n;i++) {
      cnt++;
      for(var o in this[i]) {
        if (this[i].hasOwnProperty(o) && this[i][o]==val) return cnt;
      }
    }
    return -1;
}
var myArray = [
                {
                    'color':'red',
                    'name': 'redName'
                },
                {
                    'color':'blue',
                    'name': 'blueName'
                },
                {
                    'color':'green',
                    'name': 'greenName'
                    },
                {
                    'color':'yellow',
                    'name': 'yellowName'
                },
             ];
    alert(myArray.objIndexOf('blue'))

edited Oct 18, 2012 at 20:33

answered Nov 29, 2011 at 15:39

mplungjan

180k29 gold badges183 silver badges246 bronze badges

2 Comments

mplungjan Over a year ago

1 year old answer and you bother to downvote. Shees. stackoverflow.com/questions/8859828/… Good enough for MDN, good enough for me: developer.mozilla.org/en-US/docs/JavaScript/Reference/…

qodeninja Over a year ago

haha I didnt actually downvote =) since it was already 0. 1 year later and this question was still relevant to something I was looking for.

Dave Newton · Accepted Answer · 2011-11-29 15:28:34Z

0

Iterate over the array, looking for the value inside each element object. Raw JavaScript doesn't give you a whole lot to work with.

answered Nov 29, 2011 at 15:28

Dave Newton

161k27 gold badges263 silver badges310 bronze badges

3 Comments

redconservatory Over a year ago

...I take it there's no indexOf for a multidimensional array?

Dave Newton Over a year ago

@redconservatory Well, that's not a multi-dimensional array. But no, there isn't. There are a ton of implementations you could add to the array prototype, or just do it manually.

CrayonViolent Over a year ago

there is not. But I just want to make sure you have something clear here...it seems your question is to look up the key of a value, which would be like php's array_search(). But "indexOf" is more like php's strpos() in that it looks to see if a string is within another string (and returns position of occurrence).

A-Figerou · Accepted Answer · 2021-03-17 19:20:58Z

0

In my case, I have built my own functions because I wanted the loop to stop at the first element found.

That's why the solutions with map were not working to this case as they are creating a new array.

  var i = 0;
  while (i < myArray.length) {
    if (myArray[i].color == 'blue') {
      return i;
    }
    i++
  }
  return -1

answered Mar 17, 2021 at 19:20

A-Figerou

1652 silver badges8 bronze badges

Collectives™ on Stack Overflow

Javascript indexOf on an array of objects

9 Answers 9

3 Comments

3 Comments

1 Comment

Comments

Comments

Comments

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

3 Comments

1 Comment

Comments

Comments

Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related