Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 130 down vote favorite
44

I've got an array:

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'},etc.]

I'm unable to change the structure of the array. I'm being passed an id of 45, and I want to get 'bar' for that object in the array. What's the best way? Thanks!

share|improve this question

12 Answers

up vote 250 down vote accepted

As you are already using jQuery, you can use the grep function which is intended for searching an array:

var result = $.grep(myArray, function(e){ return e.id == id; });

The result is an array with the items found. If you know that the object is always there and that it only occurs once, you can just use result[0].foo to get the value. Otherwise you should check the length of the resulting array. Example:

if (result.length == 0) {
  // not found
} else if (result.length == 1) {
  // access the foo property using result[0].foo
} else {
  // multiple items found
}
share|improve this answer
9  
It'd be safer to use === instead of ==, to avoid weird issues with JavaScript's == operator. –  Vicky Chijwani Dec 11 '12 at 12:03
 
@VickyChijwani: Are there any issues when comparing a string to a string? –  Guffa Dec 11 '12 at 12:17
3  
Well, if you're absolutely sure that both e.id and id will be strings, I suppose it's ok to use ==. But if you're not sure, you might face problems (since '' == 0 is true but '' === 0 is false). Not to mention === seems to be faster (stackoverflow.com/questions/359494/…). –  Vicky Chijwani Dec 11 '12 at 13:19
13  
Basically I always use === because it works exactly like == in other programming languages. I consider == to be non-existent in JavaScript. –  Vicky Chijwani Dec 11 '12 at 13:27
1  
never heard of .grep, but it solved a problem of mine +1 –  php-jquery-programmer Jun 26 at 18:22
show 3 more comments
up vote 40 down vote

Another solution is to create a lookup object:

var lookup = {};
for (var i = 0, len = array.length; i < len; i++) {
    lookup[array[i].id] = array[i];
}

... now you can use lookup[id]...

This is especially interesting if you need to do many lookups.

This won't need much more memory since the IDs and objects will be shared.

share|improve this answer
 
that's a really good trick! –  stef Dec 30 '12 at 11:11
 
Exactly what I was looking for. Funny how I was trying to over-complicate it by trying to loop through each time, removing each item from the list as I found it when I only needed to mutate the received data from CouchDB and get it into a format that is useful for my needs. +1 sir! –  slickplaid Feb 7 at 17:18
 
this is smart. I can't imagine how others were convinced by looking all over the array for each use. –  Aladdin Homs Feb 20 at 5:52
 
this is really helpful, even when you are not familiar with functional programming! –  johannestroeger Oct 15 at 8:29
up vote 18 down vote

Underscore.js has a nice method for that:

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'},etc.]
obj = _.find(myArray, function(obj) { return obj.id == '45' })
share|improve this answer
up vote 12 down vote

Try the following

function findById(source, id) {
  for (var i = 0; i < source.length; i++) {
    if (source[i].id === id) {
      return source[i];
    }
  }
  throw "Couldn't find object with id: " + id;
}
share|improve this answer
7  
This wasn't worthy of its own answer, but in modern browsers this solution can be written as: jsfiddle.net/rwaldron/j3vST –  Rick Sep 9 '11 at 15:50
 
@Rick thanks for the example. Very useful. –  thugsb Sep 9 '11 at 18:16
 
If you're going for efficiency, note that this example is likely faster than using filter() (see Rick's example) since this one returns once it finds the first matching item whereas filter() continues running through the full array even after finding a match. This one also doesn't have the cost of creating an additional array or calling a function for each item. –  Aaronius Aug 2 at 19:28
up vote 7 down vote

I think the easiest way would be the following, but it won't work on IE8-:

var result = myArray.filter(function(v) {
    return v.id === '45'; // filter out appropriate one
})[0].foo; // get result and access foo property
share|improve this answer
 
I'm curious, is there any performance advantage here compared to the usual for? –  Igor Zinov'yev Sep 9 '11 at 15:47
 
@Igor Zinov'yev: Yes, there certainly are performance impacts with those ES5 array tools. A separate function is executed for each element, so it won't be really fast compared to a direct for loop. –  pimvdb Sep 9 '11 at 15:48
 
So you're saying that it would be slower? Also, it will always scan the whole array, as far as I can see, whereas the for loop will terminate on the first match. –  Igor Zinov'yev Sep 9 '11 at 15:50
 
@Igor Zinov'yev: Yes it's a naive solution, I admit. –  pimvdb Sep 9 '11 at 15:53
 
@Igor Zinov'yev thanks for your reasoning. Good to know. –  thugsb Sep 9 '11 at 18:18
show 1 more comment
up vote 3 down vote

You can get this easily using the map() function:

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];

var found = $.map(myArray, function(val) {
    return val.id == 45 ? val.foo : null;
});

//found[0] == "bar";

working example: http://jsfiddle.net/hunter/Pxaua/

share|improve this answer
up vote 2 down vote

A generic and more flexible version of the findById function above:

// array = [{key:value},{key:value}]
function objectFindByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return array[i];
        }
    }
    return null;
}

var array = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
var result_obj = objectFindByKey(array, 'id', '45');
share|improve this answer
up vote 2 down vote

Iterate over any item in the array. Every item you visit, check that item's id. If it's a match, return it

If you just want teh codez:

function getId(array, id) {
    for (var i = 0, len = array.length; i < len; i++) {
        if (array[i].id === id) {
            return array[i];
        }
    }
    return null; //nothing found
}

And the same thing using ES5's Array methods:

function getId(array, id) {
    var obj = array.filter(function (val) {
        return val.id === id;
    });
    //filter returns an array, and we just want the matching item
    return obj[0];
}
share|improve this answer
up vote 1 down vote

Use the filter method of jQuery:

 $(myArray).filter(function()
 {
     return this.id == desiredId;
 }).first();

That will return the first element with the specified Id.

It also has the benefit of a nice C# LINQ looking format.

share|improve this answer
2  
The filter method is intended for elements, not arrays. Use the grep method instead. –  Guffa Sep 9 '11 at 15:56
up vote 1 down vote

You may try out Sugarjs from http://sugarjs.com/.

It has a very sweet .find method on Arrays. So you can find an element like this:

array.find( {id: 75} );

you may also pass an object with more properties to it to add another "where-clause"

Note that Sugarjs extends native objects, Some people consider this very evil...

share|improve this answer
up vote 1 down vote 
var retObj ={};
$.each(ArrayOfObjects, function (index, obj) {

        if (obj.id === '5') { // id.toString() if it is int  

            retObj = obj;
            return false;
        }
    });
return retObj;

It shoud return object by id.

share|improve this answer
up vote 0 down vote

You can use filters,

  function getById(id, myArray) {
    return myArray.filter(function(obj) {
      if(obj.id == id) {
        return obj 
      }
    })[0]
  }

get_my_obj = getById(73, myArray);
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.