Javascript indexOf on an array of objects

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"?

9 Answers

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.

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.

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" 

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.

You can use .findIndex() method

In your case

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

I hope it help.

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> 

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')) 

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

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