How to loop over and array with underscore

Question

I'm trying to loop over an Array using Underscore, I have this:

var friends = [
  {
    name: 'Jimmy',
    age: 21
  },
  {
    name: 'Anna',
    age: 19
  },
  {
    name: 'Alina',
    age: '22'
  },
  {
    name: 'Carl',
    age: '22'
  }
];

var names = _(friends).pluck('name');

for(i = 0; i < friends.length; i++){
  $('ul').append('<li>' + names[i] + '</li>');
}

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul></ul>

I'm trying to do the same using underscore's each method, but I can't achieve it, I'm trying doing something like this:

_(friends).each(function(namessss, i){
  $('ul').append('<li>' + names[i] + '</li>');
});

This actually works, but what I don't understand is why?! What's the first parameter for, it doesn't matter what I write there, it works and I wonder how to do this, and why this way works, thanks.

Did you look at the documentation? underscorejs.org/#each. If list is a JavaScript object, iteratee's arguments will be (value, key, list). console.log(namessss) It does not matter what you name it since you do not use it. — epascarello
– epascarello, Commented Oct 28, 2015 at 20:56

Andy Noelker · Accepted Answer · 2015-10-28 21:02:28Z

2

According to the documentation:

Each invocation of iteratee is called with three arguments: (element, index, list). If list is a JavaScript object, iteratee's arguments will be (value, key, list)

Your code works no matter what you write for that first argument, because you never actually use that argument (the value itself). Instead you just reference an index on the names array which you have defined outside of this loop.

If you'd like to actually use the value in the each loop, you can use something like this:

_(friends).each(function(friend, i){
  $('ul').append('<li>' + friend.name + '</li>');
});

answered Oct 28, 2015 at 21:02

Andy Noelker

11.3k7 gold badges39 silver badges49 bronze badges

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

Comments

Keith Nicholas · Accepted Answer · 2015-10-28 21:05:49Z

1

this would be a reasonably typical way :-

var friends = [
  {
    name: 'Jimmy',
    age: 21
  },
  {
    name: 'Anna',
    age: 19
  },
  {
    name: 'Alina',
    age: '22'
  },
  {
    name: 'Carl',
    age: '22'
  }
];

var names = _(friends).pluck('name');

_.each(names, function(name){
  $('ul').append('<li>' + name + '</li>');
});

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul></ul>

answered Oct 28, 2015 at 21:05

Keith Nicholas

44.4k15 gold badges101 silver badges168 bronze badges

1 Comment

Andrés Orozco Over a year ago

Why didn't I try this before? Thank you.

Bobby Orndorff · Accepted Answer · 2015-10-28 21:11:22Z

0

The each method has the syntax...

_.each(list, callbackFunc);

where callbackFunc has the syntax...

function callbackFunc(element, index, list) {}

Your code just happens to work because you stored the name values in the names array which you are then accessing using the index passed to your callback function. A better way to write the code would be...

_(friends).each(function(friend){
  $('ul').append('<li>' + friend.name + '</li>');
});

answered Oct 28, 2015 at 21:11

Bobby Orndorff

3,3551 gold badge11 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to loop over and array with underscore

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related