lazy loading the data from an array object

Question

I'm trying to figure out how to load data (lazy load). First, loads the data lets say 5 records and then when the user clicks the button second time then load another 5 records so it will be 10 records and so on and so forth till the it ends.

Peter Seliger was kind enough to answer the question and I need other half so I decided to create a new question instead of confusing him more with my original question.

const data = [
  {
    "color": "purple",
    "type": "minivan",
    "registration": new Date('2017-01-03'),
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red2",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red3",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red4",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red5",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red6",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red7",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red8",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red9",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red10",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red11",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red12",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red13",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red14",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  } 
];
data2 = {};

function* createChunkGenerator(
  itemList = [], chunkSize = 1, chunkCount = 0
) {
  chunkSize = Math.max(chunkSize, 1);

  while (itemList.length >= 1) {
    ++chunkCount; 
    yield { chunkCount, itemList: itemList.splice(0, chunkSize),  };
  }
}
let chunkGenerator = createChunkGenerator( data, 5 );
 
console.log('...automatically tiggered `next` based iteration...');  
data2 =  chunkGenerator.next();
console.log( data2 ); 

Here is the codepen I have created: https://codepen.io/threeonethree/pen/YzYgMYL

Answer 1

Where exactly are you stuck? Basically, you just have to register an event handler for the button, which then calls chunkGenerator.next() until the last chunk of elements has been processed.

const data = [{
    "color": "purple",
    "type": "minivan",
    "registration": new Date('2017-01-03'),
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red2",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red3",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red4",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red5",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red6",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red7",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red8",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red9",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red10",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red11",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red12",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red13",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red14",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }
];

function* createChunkGenerator(
  itemList = [], chunkSize = 1, chunkCount = 0
) {
  chunkSize = Math.max(chunkSize, 1);

  while (itemList.length >= 1) {
    ++chunkCount;
    yield {
      chunkCount,
      itemList: itemList.splice(0, chunkSize),
    };
  }
}

const chunkGenerator = createChunkGenerator(data, 5);
const target = document.getElementById('target');
const itemList = [];

document.querySelector('.js-lazy-load').addEventListener('click', function() {
  const chunk = chunkGenerator.next();
  if (!chunk.done) {
    const list = chunk.value.itemList;
    
    // append the new items to the itemList  
    itemList.push.apply(itemList, list);
    console.log(itemList.length + ' items loaded');
    
    // render each item
    list.forEach(function(item) {
      // render the list item here ...
      const itemElement = document.createElement('div');
      itemElement.classList.add('item');
      itemElement.innerText = item.type + ' ' + item.color + ' ' + item.capacity + ' ' + item.registration.toLocaleDateString("en-US");
      target.appendChild(itemElement);
    });
  }
})

.item {  background: #eee; margin: 3px; }
#target { width: 65%;}
.as-console-wrapper { min-height: 100%!important; top: 0; left: auto!important; right: 10px!important; width: 30%; }

<div id="target"></div>

<button type="button" class="btn btn-primary btn-block js-lazy-load">
    next
</button>