How can I get the index of an object by its property in JavaScript?

JavascriptArraysObject

Javascript Problem Overview


For example, I have:

var Data = [  { id_list: 1, name: 'Nick', token: '312312' },  { id_list: 2, name: 'John', token: '123123' },]

Then, I want to sort/reverse this object by name, for example. And then I want to get something like this:

var Data = [  { id_list: 2, name: 'John', token: '123123' },  { id_list: 1, name: 'Nick', token: '312312' },]

And now I want to know the index of the object with property name='John' to get the value of the property token.

How do I solve the problem?

Javascript Solutions


Solution 1 - Javascript

Since the sort part is already answered. I'm just going to propose another elegant way to get the indexOf of a property in your array

Your example is:

var Data = [    {id_list:1, name:'Nick', token:'312312'},    {id_list:2, name:'John', token:'123123'}]

You can do:

var index = Data.map(function(e) { return e.name; }).indexOf('Nick');

var Data = [{
    id_list: 1,
    name: 'Nick',
    token: '312312'
  },
  {
    id_list: 2,
    name: 'John',
    token: '123123'
  }
]
var index = Data.map(function(e) {
  return e.name;
}).indexOf('Nick');
console.log(index)

Array.prototype.map is not available on Internet Explorer 7 or Internet Explorer 8. ES5 Compatibility

And here it is with ES6 and arrow syntax, which is even simpler:

const index = Data.map(e => e.name).indexOf('Nick');

Solution 2 - Javascript

If you're fine with using ES6, arrays now have the findIndex function. Which means you can do something like this:

const index = Data.findIndex(item => item.name === 'John');

Solution 3 - Javascript

As the other answers suggest, looping through the array is probably the best way. But I would put it in its own function, and make it a little more abstract:

function findWithAttr(array, attr, value) {
    for(var i = 0; i < array.length; i += 1) {
        if(array[i][attr] === value) {
            return i;
        }
    }
    return -1;
}

var Data = [
    {id_list: 2, name: 'John', token: '123123'},
    {id_list: 1, name: 'Nick', token: '312312'}
];

With this, not only can you find which one contains 'John', but you can find which contains the token '312312':

findWithAttr(Data, 'name', 'John'); // returns 0
findWithAttr(Data, 'token', '312312'); // returns 1
findWithAttr(Data, 'id_list', '10'); // returns -1

The function returns -1 when not found, so it follows the same construct as Array.prototype.indexOf().

Solution 4 - Javascript

If you're having issues with Internet Explorer, you could use the map() function which is supported from 9.0 onward:

var index = Data.map(item => item.name).indexOf("Nick");

Solution 5 - Javascript

var index = Data.findIndex(item => item.name == "John")

Which is a simplified version of:

var index = Data.findIndex(function(item){ return item.name == "John"})

From [mozilla.org:][1] > The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise -1 is returned.

[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex "link"

Solution 6 - Javascript

Only way known to me is to loop through all array:

var index = -1;
for(var i=0; i<Data.length; i++)
  if(Data[i].name === "John") {
    index = i;
    break;
  }

Or case insensitive:

var index = -1;
for(var i=0; i<Data.length; i++)
  if(Data[i].name.toLowerCase() === "john") {
    index = i;
    break;
  }

On result variable index contain index of object or -1 if not found.

Solution 7 - Javascript

A prototypical way

(function(){
  if (!Array.prototype.indexOfPropertyValue){
       Array.prototype.indexOfPropertyValue = function(prop, value){
      for (var index = 0; index < this.length; index++){
        if (this[index][prop]){
          if (this[index][prop] == value){
            return index;
          }
        }
       }
      return -1;
    }
  }
 })();

 // Usage:
 var Data = [
   {id_list:1, name:'Nick', token:'312312'}, {id_list:2, name:'John', token:'123123'}];

 Data.indexOfPropertyValue('name', 'John'); // Returns 1 (index of array);
 Data.indexOfPropertyValue('name', 'Invalid name') // Returns -1 (no result);
 var indexOfArray = Data.indexOfPropertyValue('name', 'John');
 Data[indexOfArray] // Returns the desired object.

Solution 8 - Javascript

you can use filter method

 const filteredData = data.filter(e => e.name !== 'john');

Solution 9 - Javascript

You can use Array.sort using a custom function as a parameter to define your sorting mechanism.

In your example, it would give:

var Data = [    {id_list:1, name:'Nick',token:'312312'},{id_list:2,name:'John',token:'123123'}]

Data.sort(function(a, b){
    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
});

alert("First name is : " + Data[0].name); // alerts 'John'
alert("Second name is : " + Data[1].name); // alerts 'Nick'

The sort function must return either -1 if a should come before b, 1 if a should come after b and 0 if both are equal. It's up to you to define the right logic in your sorting function to sort the array.

Missed the last part of your question where you want to know the index. You would have to loop through the array to find that as others have said.

Solution 10 - Javascript

Just go through your array and find the position:

var i = 0;
for(var item in Data) {
    if(Data[item].name == 'John')
        break;
    i++;
}
alert(i);

Solution 11 - Javascript

This might be useful:

function showProps(obj, objName) {
  var result = "";
  for (var i in obj)
    result += objName + "." + i + " = " + obj[i] + "\n";
  return result;
}

I copied this from Working with objects.

Solution 12 - Javascript

Use a small workaround:

Create a new array with names as indexes. After that all searches will use indexes. So, only one loop. After that you don't need to loop through all elements!

var Data = [    {id_list:1, name:'Nick',token:'312312'},{id_list:2,name:'John',token:'123123'}    ]
var searchArr = []
Data.forEach(function(one){
  searchArr[one.name]=one;
})
console.log(searchArr['Nick'])

http://jsbin.com/xibala/1/edit

Live example.

Solution 13 - Javascript

I extended Chris Pickett's answer, because in my case I needed to search deeper than one attribute level:

function findWithAttr(array, attr, value) {
  if (attr.indexOf('.') >= 0) {
    var split = attr.split('.');
    var attr1 = split[0];
    var attr2 = split[1];
    for(var i = 0; i < array.length; i += 1) {
      if(array[i][attr1][attr2] === value) {
        return i;
      }
    }
  } else {
    for(var i = 0; i < array.length; i += 1) {
      if(array[i][attr] === value) {
        return i;
      }
    }
  };
};

You can pass 'attr1.attr2' into the function.

Solution 14 - Javascript

Use this:

Data.indexOf(_.find(Data, function(element) {
  return element.name === 'John';
}));

It is assuming you are using Lodash or Underscore.js.

Solution 15 - Javascript

var fields = {
  teste:
  {
    Acess:
    {
      Edit: true,
      View: false
    }
  },
  teste1:
  {
    Acess:
    {
      Edit: false,
      View: false
    }
  }
};

console.log(find(fields,'teste'));

function find(fields,field) {
  for(key in fields) {
    if(key == field) {
      return true;
    }
  }
  return false;
}

If you have one Object with multiple objects inside, if you want know if some object are include on Master object, just use find(MasterObject, 'Object to Search'). This function will return the response if it exists or not (TRUE or FALSE). I hope to help with this - can see the example on JSFiddle.

Solution 16 - Javascript

let indexOf = -1;
let theProperty = "value"
let searchFor = "something";

theArray.every(function (element, index) {

    if (element[theProperty] === searchFor) {
        indexOf = index;
        return false;
    }
    return true;
});

Solution 17 - Javascript

collection.findIndex(item => item.value === 'smth') !== -1

Solution 18 - Javascript

If you want to get the value of the property token then you can also try this:

    let data=[
      { id_list: 1, name: 'Nick', token: '312312' },
      { id_list: 2, name: 'John', token: '123123' },
    ]

    let resultingToken =  data[_.findKey(data,['name','John'])].token

where _.findKey is a Lodash function.

Solution 19 - Javascript

You can use findIndex in Lodash library.

Example:

var users = [
{ 'user': 'barney',  'active': false },
{ 'user': 'fred',    'active': false },
{ 'user': 'pebbles', 'active': true }
            ];

_.findIndex(users, function(o) { return o.user == 'barney'; });
// => 0

// The `_.matches` iteratee shorthand.
_.findIndex(users, { 'user': 'fred', 'active': false });
// => 1

// The `_.matchesProperty` iteratee shorthand.
_.findIndex(users, ['active', false]);
// => 0

// The `_.property` iteratee shorthand.
_.findIndex(users, 'active');
// => 2

Solution 20 - Javascript

Alternatively to German Attanasio Ruiz's answer, you can eliminate the second loop by using Array.reduce() instead of Array.map();

var Data = [
    { name: 'hypno7oad' }
]
var indexOfTarget = Data.reduce(function (indexOfTarget, element, currentIndex) {
    return (element.name === 'hypno7oad') ? currentIndex : indexOfTarget;
}, -1);

Solution 21 - Javascript

Maybe the Object.keys, Object.entries, and Object.values methods might help.

Solution 22 - Javascript

Using Underscore.js:

var index = _.indexOf(_.pluck(item , 'name'), 'Nick');

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionrsboarderView Question on Stackoverflow
Solution 1 - JavascriptGerman AttanasioView Answer on Stackoverflow
Solution 2 - Javascriptsilverlight513View Answer on Stackoverflow
Solution 3 - JavascriptChris PickettView Answer on Stackoverflow
Solution 4 - JavascriptAlain T.View Answer on Stackoverflow
Solution 5 - JavascriptedankView Answer on Stackoverflow
Solution 6 - JavascriptAndrew D.View Answer on Stackoverflow
Solution 7 - JavascriptPatrik WallinView Answer on Stackoverflow
Solution 8 - JavascriptSakhri HoussemView Answer on Stackoverflow
Solution 9 - Javascriptuser334899View Answer on Stackoverflow
Solution 10 - JavascriptSascha GalleyView Answer on Stackoverflow
Solution 11 - JavascriptAshishView Answer on Stackoverflow
Solution 12 - Javascriptuser4466709View Answer on Stackoverflow
Solution 13 - JavascriptEd SheeView Answer on Stackoverflow
Solution 14 - JavascriptElloneView Answer on Stackoverflow
Solution 15 - JavascriptPedro Monteiro ArantesView Answer on Stackoverflow
Solution 16 - JavascriptItay MerchavView Answer on Stackoverflow
Solution 17 - JavascriptEugene LyzoView Answer on Stackoverflow
Solution 18 - JavascriptAkash SinghView Answer on Stackoverflow
Solution 19 - JavascriptIman MarashiView Answer on Stackoverflow
Solution 20 - Javascripthypno7oadView Answer on Stackoverflow
Solution 21 - JavascriptmilahView Answer on Stackoverflow
Solution 22 - JavascriptM Faisal HameedView Answer on Stackoverflow