CODEWITHSUNDEEP
javascriptarraysloopsreactjs
Jamgreen
Jamgreen

Reputation: 11059

Break loop after every third iteration

I have an array arr = [1, 2, 3, 4].

I want to print

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<ul>
  <li>4</li>
</ul>

So I will need to break the loop after each third element.

let s = '<ul>';
arr.forEach(el => {
  s += '<li>' + el + '</li>';
});
s += '</ul>';

Upvotes: 0

Views: 768

Answers (4)

Hitmands
Hitmands

Reputation: 14199

you can break iterations only when using for or while loops, they are the standard javascript way to iterate.

by the way, if you want to template over an array, in my opinion, Array.prototype.reduce is the best way to fit what you want...

/**
 * @param {any[]} list
 * @param {int} breakIndex
**/
function compileHtmlLists(list, breakIndex) {
  
  return list
    .reduce(function(tpl, item, i, list) {
      var last = i === list.length - 1;
    
      item = "<li>" + item + "</li>";
    
      if(i === breakIndex) {
        item = "</ul><ul>" + item;        
      }
    
      if(last) {
        item += "</ul>";        
      }
    
    
      return tpl.concat(item);
    }, "<ul>")
  ;
}

var view = compileHtmlLists(
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
  5
)

console.log(view);

Upvotes: 0

Pranesh Ravi
Pranesh Ravi

Reputation: 19123

You can use this simple solution.

This uses slice to extract the first 3 element and runs a recursive call until the array is finished 

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]



const itrate = (arr) => {
  var firstThree = arr.slice(0, 3)
  var rest = arr.slice(3, arr.length)
  var ul = document.createElement('ul')
  firstThree.forEach((el) => {
    if (el) {
      li = document.createElement('li')
      li.innerHTML = el
      ul.appendChild(li)
    }
  })
  var node = document.getElementById('app')
  node.appendChild(ul)
  if (rest.length > 0)
    itrate(rest)
}

itrate(a)
<div id="app"></div>

Upvotes: 0

Abdul Mateen Mohammed
Abdul Mateen Mohammed

Reputation: 1894

Check this simple solution, which uses a single loop without any break statements to create the HTML content that you want.

function generateTemplate(items, splitPoint) {
  var template = '<ul>';

  for (var i = 0; i < items.length; i++) {
    if (items[i] === splitPoint) {
      template += '</ul><ul>';
    }

    template += '<li>' + items[i] + '</li>';
  }

  template += '</ul>';

  return template;
}

var container = document.getElementById('container');
var items = [1, 2, 3, 4, 5, 6];
var template = generateTemplate(items, 4);
container.innerHTML = template;
ul {
  list-style-type: none;
  padding: 0px;
}
ul li {
  background-color: #E6E6E6;
  margin: 5px;
  padding: 5px;
}
<div id="container">
</div>

Upvotes: 0

Rajesh
Rajesh

Reputation: 24945

Instead of breaking loop, you can split array in chunks and create your HTMLString accordingly.

var arr = [1, 2, 3, 4, 5];

function getULStructure(arr) {
  let s = '<ul>';
  arr.forEach(el => {
    s += '<li>' + el + '</li>';
  });
  s += '</ul>';
  return s
}

function createHTMLString(arr, count) {
  var _htmlString = ''
  while (arr.length > 0) {
    _htmlString += getULStructure(arr.splice(0, count))
  }
  return _htmlString
}

var _html = createHTMLString(arr, 3);
document.querySelector('.content').innerHTML = _html
<div class="content">
</div>

Upvotes: 1

Related Questions