Returning an object in .each iteration - JavaScript

Question

I have an object called Category which uses a method to iterate over an array of products (Product) and return an instance which meets the this.name === query condition:

function Category(products){
  this.products = products; 
  this.findProductByName = function(query){
    $(this.products).each(function(){
      return this.name === query; 
    }
  }
}

My Product (just in case):

function Product(name){
  this.name = name;
}

I then create an instance of Category with products:

var $someCategory = new Category(
   [
      new Product('foo'),
      new Product('bar')
   ]
)`

and when I call:

$someCategory.findProductByName('foo'); // 'undefined'

even though:

...
this.findProductByName = function(query){
  $(this.products).each(function(){
    console.log(this.name === query); // returns 'true'
  }
}
...

What do I do to return an object when this.name === query is met?

The $.each() mechanism ignores the returned values (mostly). What is it that you expect it to do? — Pointy
– Pointy, Commented Jun 1, 2016 at 0:32
@Pointy return the correct Product instance when the conditional is met, so that I can search for products within $someCategory by name. What do you mean by "ignores the returned values"? — dimitry_n
– dimitry_n, Commented Jun 1, 2016 at 0:34
The return from inside the $.each() callback only returns from that function; it doesn't return from your findProductByName function. — Pointy
– Pointy, Commented Jun 1, 2016 at 0:36

ACruz · Accepted Answer · 2016-06-01 00:42:12Z

2

Do you need to use jQuery? Can you instead use the array filter method...

function Category(products){
  this.products = products; 
  this.findProductByName = function(query){
    return this.products.filter(function(item){
      return item.name === query; 
    });
  };
}

answered Jun 1, 2016 at 0:42

ACruz

1012 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Neil Cross · Accepted Answer · 2016-06-01 00:40:19Z

1

You need to use a traditional loop with a return (or map/reduce) to have your function return the matched result. The each function performs an operation on each element in the array, it, won't perform filtering, and ignores the returned value.

Try this:

this.findProductByName = function(query) {
  for (var i = 0; i < this.products.length; i++) {
    if (this.products[i].name === query)
    {
      return this.products[i];
    }
  }
}

Also FYI, It's normal to pass arguments into the each() function which identify the current element being iterated over when using This helps eliminate the scope issue for 'this'

$(this.products).each(function( index, value ) {
  alert( index + ": " + value );
});

answered Jun 1, 2016 at 0:40

Neil Cross

5023 silver badges9 bronze badges

3 Comments

dimitry_n Over a year ago

Nice! Thanks! Question: so why use each at all when the for loop already handles the iteration and returns vals?

Neil Cross Over a year ago

It's syntactic niceness for when you explicitly want to perform an operation on each item in the array, i.e. adding a prefix to the name property: $(this.products).each(function(i,el){el.name = 'My ' + el.name;});

Neil Cross Over a year ago

Also some people just love jquery over native javascript.

Collectives™ on Stack Overflow

Returning an object in .each iteration - JavaScript

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related