Can't get return value in chrome console from namespaced javascript function

Question

I want to get values from a table on my fantasy sports team website using javascript (and ultimately sum them). I also want to properly namespace this for good form and practice.

The following working code attempts to filter out empty rows, leaving me with an array of DOM table rows that I care about.

playerRow = jQuery(".pncPlayerRow");
players   = []

var realRows = function(){

  playerRow.each(function(){
    if (jQuery(this).eq(0).children().eq(7).text() != "--"){
      players.push(this);
    } 
  }) 

  return(players);  // returns array of non-empty <tr>
}
realRows();

Now, when I try to namespace this, I'm getting a return value of undefined. Here is my code:

FantasyStats = {}
FantasyStats.collect = function(){
  var playerRow = jQuery(".pncPlayerRow");
  var players   = []
  var realRows = function(){  
    playerRow.each(function(){
      if (jQuery(this).eq(0).children().eq(7).text() != "--"){
        players.push(this);
      } 
    }) 
    return(players);
  }
  realRows();
}
FantasyStats.collect()

Am I doing this wrong? Any suggestions?

you forgot to return realRows result. – Kai Oct 25 '14 at 14:22 — Kai, Oct 25 '14 at 14:22

score 2 · Accepted Answer · edited May 23 '17 at 12:11

If you want FantasyStats.collect to return the return value of realRows, you need to add a return:

  // ...
  return realRows(); // <== On this line at the end of `collect`
}
FantasyStats.collect()

Side note: Your code appears to be relying on The Horror of Implicit Globals (in your first version, you don't declare playerRow or players; in your second, you don't declare FantasyStats). Strongly recommend declaring your variables. You can use strict mode to enforce the habit.

Side note two: Normally I advocate people writing more functions (e.g., taking big ones and breaking them into a series of smaller ones), but in this case I don't really see that the realRows function is doing anything for you:

var FantasyStats = {};
FantasyStats.collect = function(){
  var playerRow = jQuery(".pncPlayerRow");
  var players   = [];

  playerRow.each(function(){
    if (jQuery(this).children().eq(7).text() != "--"){
      players.push(this);
    } 
  });
  return players;
};
FantasyStats.collect();

I added the var, and also a couple of missing semicolons, and there's never any purpose to .eq(0) after jQuery(this) (by definition, the jQuery set created by jQuery(this) already has just one element in it).

Taking it a bit further, you're reinventing jQuery's filter function, which you could use instead:

var FantasyStats = {};
FantasyStats.collect = function(){
  return jQuery(".pncPlayerRow").filter(function(){
    return jQuery(this).children().eq(7).text() != "--");
  }).get();
};
FantasyStats.collect();

(Note the .get() at the end to turn the jQuery set into a normal array.)

Or this slightly-easier-to-debug version:

var FantasyStats = {};
FantasyStats.collect = function(){
  var players = jQuery(".pncPlayerRow").filter(function(){
    return jQuery(this).children().eq(7).text() != "--");
  }).get();
  return players;
};
FantasyStats.collect();

Hey thanks for these detailed notes! Looks much better. – cheeseandpepper Oct 25 '14 at 14:46 — cheeseandpepper, Oct 25 '14 at 14:46

score 1 · Answer 2 · answered Oct 25 '14 at 14:25

2 ways to fix this issue :

1/.

FantasyStats = {}
FantasyStats.collect = function(){
  var playerRow = jQuery(".pncPlayerRow");
  var players   = []
  var realRows = function(){  
    playerRow.each(function(){
      if (jQuery(this).eq(0).children().eq(7).text() != "--"){
        players.push(this);
      } 
    }) 
    return players;
  }
  return realRows(); // return return of realRows => players Array.
}
FantasyStats.collect()

2/.

FantasyStats = {}
FantasyStats.collect = function(){
  var playerRow = jQuery(".pncPlayerRow");
  var players   = []
  var realRows = function(){  
    playerRow.each(function(){
      if (jQuery(this).eq(0).children().eq(7).text() != "--"){
        players.push(this);
      } 
    }) 
  }
  realRows();
  return players; // return players array after it was filled by realRows function
}
FantasyStats.collect();

I suggest the second.

Can't get return value in chrome console from namespaced javascript function

2 Answers2