Search code examples
javascriptarraysunderscore.jsunderscore.js-templating

Underscore loop 2 arrays and match values in template


I have some dummy data with 2 arrays, the arrays will have some duplicated values. In my template I want to compare the 2 arrays and add a visibility class is-hidden to any that match as duplicates but I'm not sure how to loop both arrays and do the matching? Can I run isEqual against the 2 in some kind of each loop?

Handlebars Template

<script type="text/html" id="tmpl">
    <% _.each(mappedSessions, function(session) { %>

       <p class="<% if(session === deleteSessions) { %>is-hidden<% } %>">
           Mapped Entry <u><%= session %></u> Available
       </p>
   <% }) %>
</script>

JS

var data = {
    "id": 1,
    "deleteSessions": ["X0101"],
    "mappedSessions": ["ABC123", "EDF092", "X0101"]
}

var template = _.template($('#tmpl').html());

$('.js-output').html(template(data));

Solution

  • In this case better format data before send it to template

    var data = {
        "id": 1,
        "deleteSessions": ["X0101"],
        "mappedSessions": ["ABC123", "EDF092", "X0101"]
    }
    
    var template = _.template($('#tmpl').html());
    var sessions = _.map(data.mappedSessions, function (session) {
      return {
        isHidden: _.indexOf(data.deleteSessions, session) >= 0,
        value: session
      }
    });
    
    $('.js-output').html(template({ sessions: sessions }));
    .is-hidden {
      color: red;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
    
    <script type="text/html" id="tmpl">
        <% _.each(sessions, function(session) { %>
           <p class="<% if (session.isHidden) { %>is-hidden<% } %>">
               Mapped Entry <u><%= session.value %></u> Available
           </p>
       <% }) %>
    </script>
    
    <div class="js-output"></div>