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
– Peter Seliger, Commented Apr 21, 2022 at 22:03

Peter Seliger · Accepted Answer · 2022-04-22 07:47:33Z

3

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>

edited Apr 22, 2022 at 7:47

Peter Seliger

13.5k3 gold badges31 silver badges45 bronze badges

answered Apr 21, 2022 at 22:04

Đinh Carabus

3,5054 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Peter Seliger Over a year ago

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 from each itemList item.

Đinh Carabus Over a year ago

@PeterSeliger okay, I just added a simplistic example to my answer since I'm not sure what the OP's exact requirements are.

ThreeOneThree Over a year ago

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 Over a year ago

i think i can do something like thisdata2 = {}; data2 += itemList;

Đinh Carabus Over a year ago

@ThreeOneThree, I have edited my answer.

Collectives™ on Stack Overflow

lazy loading the data from an array object

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related