6

There's a gap in my JavaScript knowledge here. I want to search an array of objects values for a particular value and return it.

For the year I have been writing JavaScript, I have been implementing it like this:

var itemClicked = (function(){

  var retval;

  //Note self.inventory.itemsArray is an array of JS objects

  $(self.inventory.itemsArray).each(function(i){
    if(parseInt(this.id) === parseInt(idOfItem)){
      retval = this;
      return false;
    }
  });

  return retval;

})();

It works, but I'm sure as anything there is a more elegant way. Tell me please!

EDIT - Solution

Thanks to @gdoron with his answer below.

var myVar = $(self.owner.itemsArray).filter(function(){
   return parseInt(this.id) == parseInt(recItemID);
}).get(0);

Note: .get(0) was added at the end because myVar is wrapped as a jQuery object.

Improve this question
9
  • Define "more efficient." Some will misunderstand with "less characters" Commented Jan 9, 2013 at 22:28
  • 1
    So self.inventory.itemsArray is an array of selectors or jQuery objects? Commented Jan 9, 2013 at 22:30
  • why not index your array by id? They you just need to do return self.inventory.itemsArray[id] and avoid the loop entirely. Commented Jan 9, 2013 at 22:33
  • What do you mean with efficient? If you're looking for performance, you might want to sort the array by id and perform a binary search to achieve O(n log n) time complexity - or even switch to a hash map for O(n) by storing the items by id. If you're just looking to write less code, use $.filter(). Commented Jan 9, 2013 at 22:33
  • It's an array of Javascript objects. More efficient as in, less characters and not having to execute potentially useless code in a loop until it's found Commented Jan 9, 2013 at 22:33

4 Answers 4

Reset to default
15

The native jQuery function for this is filter:

$(data).filter(function(){
    return this.id == "foo";
});

It's shorter than code you have and more important a lot more readable.
About efficiency, it will iterate all the elements in the set to find as much as possible matches, but I hardly believe it will be the bottle neck of your application, don't focus on micro-optimisations.

I suggest you read Eric Lipper blog about Which is faster.

You can also use grep as suggested by @Mattias Buelens:

$.grep(data, function(ele){
    retun ele.id == "foo";
});
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Native to jq, not native to the language. You might want to be more precise about that.
@gustafr, I believe it's obvious, but I'll add it.
This solution unnecessarily wraps the array in a jQuery object though. $.find maps to jQuery.grep when passing a function, so you're better off using grep directly as demonstrated by @Bruno.
Sticking .get(0) on the end does the trick though. This is the solution that I wanted. Thanks.
4

Just another option using jQuery's $.grep( ) function

var arr = $.grep( self.inventory.itemsArray, function ( n ) { 
    return n.id == idOfItem;
});

The above returns an array of matching array elements. If you just want the first it is easy enough to return arr[0] if it exists.

Improve this answer

5 Comments

Doesn't grep return an array, instead of the first matching object?
As opposed to $.filter, jQuery.grep doesn't unnecessarily wrap the array in a jQuery object. Both solutions still find all matching elements, though. I can't seem to find a native Array method or jQuery function which can stop searching after the first match.
@MattiasBuelens, each when returns false stops the iterations. though I would still use filter as it's a lot more readable.
@gdoron The OP commented that he was looking to prevent these extra iteration, but you're absolutely correct that they won't cause a noticeable performance decrease.
Yeah @gdoron that's what I had in my original to stop the search, thanks. But yeah, .filter is much more readable. Mattias Buelens, thanks for the help too. These IDs come from my data model so I know they are unique so it doesn't really matter. Thanks all for your help. +1 for grep.
0

Although I'm unsure what the function is actually supposed to do (due to the external contexts' variables), the following should be more efficient cycle-wise

var itemClicked = (function(){

  var i, array = self.inventory.itemsArray, length = array.length;

  for( i=0; i < length; i++) {

    if(parseInt(array[i].id) === parseInt(idOfItem)){
      return array[i];
    }

  }

  return undefined;

})();
Improve this answer

Comments

0

It's an array of Javascript objects

Then do not use jQuery at all. At least, use $.each instead of building a wrapper object around the array. Still, a simple for-loop is much shorter and more performant:

var itemClicked = (function(idnum) {
    var arr = self.inventory.itemsArray;
    for (var i=0, l=arr.length; i<l; i++)
        if (parseInt(arr[i].id, 10) === idnum)
            return arr[i];
})( parseInt(idOfItem, 10) );

You might as well think of storing the id properties as numbers right away, so you don't need to convert it each time.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.