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

Answer 1

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.

Answer 2

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.

Answer 3

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"

Answer 4

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.

Answer 5

You can use .findIndex() method

In your case

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

I hope it help.

Answer 6

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>

Answer 7

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

Answer 8

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

Answer 9

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