Javascript indexOf on an Array of Objects

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.

3
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.

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

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.

0

You can use .findIndex() method

In your case

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

I hope it help.

0

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

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

3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

David Miller
Author

David Miller

David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.