Jquery: Index Of Element In Array Where Predicate

I have an array of objects. Each object has, among others, an ID attribute. I want to find the index in the array of the object with a specific ID. Is there any elegant and simple

Solution 1:

See [`Array.filter`][1] to filter an array with a callback function. Each object in the array will be passed to the callback function one by one. The callback function must return `true` if the value is to be included, or false if not.

    var matchingIDs = objects.filter(function(o) {
        return o.ID == searchTerm;
    });

All objects having the ID as searchTerm will be returned as an array to matchingIDs. Get the matching element from the first index (assuming ID is unique and there's only gonna be one)

    matchingIDs[0];

  [1]: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Objects/Array/filter

Update:

Checkout findIndex from ECMAScript 6.

items.findIndex(function(item) { item.property == valueToSearch; });

Since findIndex isn't available on most browsers yet, you could backfill it using this implementation:

if (!Array.prototype.findIndex) {
  Array.prototype.findIndex = function(predicate) {
    if (this == null) {
      thrownewTypeError('Array.prototype.findIndex called on null or undefined');
    }
    if (typeof predicate !== 'function') {
      thrownewTypeError('predicate must be a function');
    }
    var list = Object(this);
    var length = list.length >>> 0;
    var thisArg = arguments[1];
    var value;

    for (var i = 0; i < length; i++) {
      value = list[i];
      if (predicate.call(thisArg, value, i, list)) {
        return i;
      }
    }
    return -1;
  };
}

Solution 2:

In the case you should use for loop in javascript instead of using jQuery. See way 3 in http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

UPDATED: jQuery is written in javascript and it can not be faster than another code written also in javascript. jQuery is very good if you work with the DOM, but doesn't really help if you're working with simple javascript arrays or objects.

The code you're looking for can be something like this:

for (var i=0, l = ar.length; i<l; i++) {
    if (ar[i].ID === specificID) {
        // i is the index. You can use it here directly or make a break// and use i after the loop (variables in javascript declared// in a block can be used anywhere in the same function)
        break;
    }
}
if (i<l) {
    // i is the index
}

Important that you should hold some simple javascript rules: Always declare local variables (don't forget var before variable declaration) and cache any properties or indexes that you use more than one time in a local variable (like ar.length above). (See for example http://wiki.forum.nokia.com/index.php/JavaScript_Performance_Best_Practices)

Solution 3:

Not really elegant, but a cute trick:

var index = parseInt(
  $.map(array, function(i, o) { return o.id === target ? i : ''; }).join('')
);

jQuery doesn't have a lot of functional constructs like that; the philosophy of the library is really focused on the job of DOM wrangling. They won't even add a .reduce() function because nobody can think of a reason it'd be useful to the core functionality.

The Underscore.js library has a lot of such facilities, and it "plays nice" with jQuery.

Solution 4:

There are no built-in methods for this; the [].indexOf() method doesn't take a predicate, so you need something custom:

functionindexOf(array, predicate)
{
    for (var i = 0, n = array.length; i != n; ++i) {
        if (predicate(array[i])) {
            return i;
        }
    }
    return -1;
}

var index = indexOf(arr, function(item) {
    return item.ID == 'foo';
});

The function returns -1 if the predicate never yields a truthy value.

Update

There's Array.findIndex() that you could use now:

const arr = [{ID: 'bar'}, {ID: 'baz'}, {ID: 'foo'}];
const index = arr.findIndex(item => item.ID === 'foo');
console.log(index); // 2

Solution 5:

Use jOrder. http://github.com/danstocker/jorder

Feed your array into a jOrder table, and add an index on the 'ID' field.

var table = jOrder(data)
    .index('id', ['ID']);

Then, get the array index of an element by:

var arrayidx = table.index('id').lookup([{ ID: MyID }]);

If you want the entire row, then:

var filtered = table.where([{ ID: MyID }]);

Voila.