Show few at a time

by scorpion_rain

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<div class="container">
  <!-- data goes here -->
</div>

<script id="template" type="text/x-handlebars-template">
	<div class="parent">
		{{#each names}}
    	<p class="child">Name: {{name}}, Age: {{age}}. Profession: {{work}}</p>
  	{{/each}}
  </div>
</script>

JavaScript

let model = {
	names: [
  	{name: "Michael", age: 22, work: "apple planter"},
    {name: "Smith", age: 35, work: "baseball player"},
    {name: "Sally", age: 33, work: "courier"},
    {name: "Lara", age: 87, work: "drummer"},
    {name: "Simon", age: 25, work: "english  teacher"},
    {name: "Tucker", age: 27, work: "football player"},
    {name: "Angel", age: 87, work: "golf instructor"},
    {name: "Venom", age: 44, work: "hotel manager"},
    {name: "Clark", age: 82, work: "instructor"},
    {name: "Steven", age: 11, work: "junior programmer"},
    {name: "Sandy", age: 45, work: "kite designer"},
  ]
}

let template = Handlebars.compile($("#template").html());

var mod = {
	names: []
}


$(document).ready(function(){
	AddToDom();
});

function AddToDom(){
	
  mod.names = model.names.splice(0, 5);
  
  if(mod.names.length == 0){
  	location.reload();
  }
  
  $(".container").html(template(mod));

	setTimeout(AddToDom, 5000);
}