How to traverse through every 2 items using _.each() in Underscore.js

Question

Hi we are using the underscore.js library for some of our code:

{{ _.each(items, function(item) { }} 

    <li class="">
        <a class="title" href="{{= item.Id }}"><h2>{{= item.Name}}</h2></a>
        <p>{{= item.ShortDesc}}</p>
    </li>

{{ }); }}

Which will output:

<li><a><h2>Element 1</h2></a><p>Description of element 1</p></li>
<li><a><h2>Element 2</h2></a><p>Description of element 2</p></li>
...

But what we want is:

<li>
    <a><h2>Element 1</h2></a><p>Description of element 1</p>
    <a><h2>Element 2</h2></a><p>Description of element 2</p>
</li>
<li>
    <a><h2>Element 3</h2></a><p>Description of element 3</p>
    <a><h2>Element 4</h2></a><p>Description of element 4</p>
</li>
...

Basically, fill the <li> every 2 items using the _.each.

Please advise. Thanks

can you not just put them in there? It seems like that takes html so why can't you just add the extra elements inside the li? — dbarnes, May 19 '15 at 17:28
@doglin Did anyone solve your problem? If so, could you please accept the best answer (click the checkmark under the points). That will help other users that come across your question quickly spot the accepted answer and it also gives 15 rep. points to the author (: — Danziger, Jan 31 '18 at 06:12

score 2 · Answer 1 · answered May 19 '15 at 17:47

2

The callback function passed to _.each() takes the loop index or object key as its second parameter, so you could theoretically use that. That said, if not done carefully, you might find yourself missing a closing </li> tag at the end.

What I would suggest is using _.groupBy to group into consecutive multiples of two, and then iterating over each of those:

// In the code which renders the template
// (because you REALLY don't want this in your template):

var groups = _.groupBy(items, function (item, index) {
    return Math.floor(index / 2);
});

// In your template:

{{ _.each(groups, function(itemsInGroup) { }} 
    <li class="">

    {{ _.each(itemsInGroup, function (item) { }}
        <a class="title" href="{{= item.Id }}"><h2>{{= item.Name}}</h2></a>
        <p>{{= item.ShortDesc}}</p>
    {{ }); }}

    </li>
{{ }); }}

The advantage of this approach is you could later change the number of items in your group, and you would only need to modify the JavaScript file feeding into the template-- the template itself will work no matter the group size.

answered May 19 '15 at 17:47

Platinum Azure

45,269
12
110
134

This is a good solution, but I think there's no need to create another structure with the grouped elements just to render them like that, specially if they are many and assuming they were stored like a simple array, unless you were going to use that same structure again. However, I would choose this approach if they were already grouped. – Danziger May 19 '15 at 18:11
1

@Danziger You're right that this might be overkill in some ways, but I'm responding to a new class of problem introduced by the requirement. Personally the correct approach (in my view) is to render `
` for each element (for *semantic* reasons-- i.e., assuming each item is equal value, it should be its own list item) and then use CSS to group pairs as needed.

Platinum Azure

May 19 '15 at 21:00

I agree with that. In fact, I think it may be good to use a [definition list](http://maxdesign.com.au/articles/definition) instead, but this approach would probably make styling and event handling more complicated than it should be and it would be difficult to solve that without sacrificing semantics and making the HTML markup too intricate as it is reflected in this [question](http://stackoverflow.com/questions/10875064/is-there-a-valid-way-to-wrap-a-dt-and-a-dd-with-an-html-element). So yes, probably an unordered list (`

`) gives us the best compromise between semantics and practicality.

– Danziger May 19 '15 at 21:56

Danziger · Answer 2 · 2020-01-04T15:05:44.397

_.each also provides you the index of the current iteration with by adding a second parameter to the iterator function, so you can do:

{{ _.each(items, function(item, index) { }} 

    {{ if(rem = index % 2 == 0) { }} <li class=""> {{ } }}
        <a class="title" href="{{= item.Id }}"><h2>{{= item.Name}}</h2></a>
        <p>{{= item.ShortDesc}}</p>
    {{ if(! rem) { }} </li> {{ } }}

{{ }); }}

// Just in case items has an odd number of elements:
{{ if(items.length % 2 != 0){ }} </li> {{ } }}

You can try that in this snippet. It uses Array.prototype.forEach(), not Underscore.js one, but the arguments for the callback are the same: (element, index, list):

let html = '';

items = ['A-1', 'A-2', 'B-1', 'B-2', 'C-1', 'C-2', 'D-1', 'D-2', 'Odd last element.'];

items.forEach((item, index) => { 
  const rem = index % 2;
  
  if(!rem) html += '<li>';

  html += `<div>${ item }</div>`;

  if(rem) html += '</li>';
});

if (items.length % 2 != 0) html += '</li>'

document.getElementById('wrapper').innerHTML = html;

body {
  margin: 8px;
  font-family: monospace;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  border: 1px solid black;
  margin: 8px 0 0 0;
}

div {
  border: 1px solid #CCC;
  margin: 8px;
  padding: 8px;
}

<ul id="wrapper"></ul>

This won't work for odd-length lists, I don't think (final `` is not generated). — Platinum Azure, May 19 '15 at 17:45
You're rigth, I supposed there was an even number of elements. I've updated the code to add the final `` in that case. — Danziger, May 19 '15 at 18:01

How to traverse through every 2 items using _.each() in Underscore.js

2 Answers2