Mustache Example 5

Calling an anonymous lambda function against a dynamic array of data

by saminath_krisna

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<div id="output"></div>
<script type="text/html" id="question-template28">
<div id="fractionBars">
   {{#fractions}}
     <div class="subContainer">
      {{#nr}}
         <div id="filledElement"></div>
      {{/nr}}
      {{#dr}}
         <div></div>
      {{/dr}}   
      </div>
      {{#op}}
         <div class="operator">{{op}}</div>
      {{/op}}
   {{/fractions}} 
</div>

SCSS

$repeat-count: 5;
$repeatValue: 10fr 1fr;

div#fractionBars { 
  display: grid;
  grid-template-columns: repeat($repeat-count, $repeatValue) 10fr 0fr ;
  min-width: auto;
  max-width: 500px;
  min-height: auto;
  
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: lightblue;
  
  .operator {
    padding: 1px;
    margin: 0px;
    align-self: center;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
  }
  
  .subContainer {
    margin: 10px;
    & > div {
      margin: 0px 5px;
      padding: 10px;
      border-left: 2px solid black;
      border-right: 2px solid black;
      border-bottom: 2px solid black;
      background: white
    }
    
    & #filledElement {
      background:greenyellow;
        &:first-child {
        border-top: 2px solid black;
      }
    }
  }
}

JavaScript

$(document).ready(function () {
    var output = $("#output");    
    var template = $("#question-template28").html();
    var data = {
    	"fractions": [
      	{nr: "5", dr: "5", op: "+"},
        {nr: "5", dr: "5", op: "+"},
        {nr: "5", dr: "5", op: "+"},
        {nr: "5", dr: "5", op: "+"},
        {nr: "5", dr: "5", op: "+"},
        {nr: "2", dr: "5", op: ""}
      ]
    };
    console.log(data.fractions.length)
    data.fractions.dr = data.fractions.map((element, index) => {
    const drLength = element.dr - element.nr
    return Array(drLength).fill(0);
    } );
    data.fractions.nr = data.fractions.map((element, index) => {
    const nrLength = element.nr
    return Array(nrLength * 1).fill(0);
    } );
    data.fractions.forEach((element, index) => {
      element.nr = data.fractions.nr[index]
      element.dr = data.fractions.dr[index]
    })
    var html = Mustache.render(template, data);
    output.append(html);
});