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

My second code example from the former/other question already shows the integration into the DOM via markup and a `'click'` handler with the bound generator and element nodes. Every time one clicks the button, a new chunk gets presented. It is working code. Thus one just needs to adapt the code which is already there, and instead of rendering the pure chunk data as text, one creates the correct element nodes and fills them from/with the data of each of the chunk's `itemList` items and appends the created nodes to the lazy-load root-node in the DOM. — Peter Seliger, Apr 21 '22 at 22:03

score 2 · Accepted Answer · edited Apr 22 '22 at 07:47

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>

The OP wants real element-nodes with the data from each chunked `itemList` get rendered into the document. My former 2nd example shows how to deal with it. [It just renders the OP's sample data as text into the document instead of creating real element nodes](https://stackoverflow.com/questions/71943500/slicing-array-list-five-elements-at-a-time-in-javascript/71944240#71944240) from each `itemList` item. — Peter Seliger, Apr 21 '22 at 22:11
@PeterSeliger okay, I just added a simplistic example to my answer since I'm not sure what the OP's exact requirements are. — Đinh Carabus, Apr 21 '22 at 22:25
how can I accumulate the previous 5 records into the itemList? so first time the `itemList` is going to be 5 but when you click the second time it's going to be 10 and third time its going to be 15 so on and so forth, but the above examples it does not store the previous itemList — ThreeOneThree, Apr 21 '22 at 22:34
i think i can do something like this`data2 = {}; data2 += itemList;` — ThreeOneThree, Apr 21 '22 at 22:45

lazy loading the data from an array object

1 Answers1