How can you dynamically slice an array in Javascript/jQuery?

Question

I have a photo gallery that includes images that will be continuously uploaded. The PHP array has been converted/encoded to a JSON array so that I can manipulate the data with JavaScript.

Ideally, I would like to click a button ("Next Set" in the CodePen example) and load the next set (of 2) thumbnail images. This is in an effort to not load all of the images at once, which could be hundreds.

Problem: I cannot figure out how to dynamically slice the array on click (next 5 images). I can of course load, say, 2 at a time:

myArray.slice(0,2);
myArray.slice(3,5);

However, this will not work because images will be continuously added to the gallery. Furthermore, I would have to have too many sets of the above to keep slicing 5 out at a time.

I have tried:

Splitting the array into smaller arrays
for loops and $.each loops

I essentially need to be able to move the start and end index of the slice by (for example) 2 on click. Right now it just keeps slicing the same two images because the slicing is not dynamic.

Here is my CodePen

Just keep track of the index in a global var and increment by five each click. Then .slice(index, index + 5); index += 5; — Jared Smith
– Jared Smith, Commented Apr 7, 2017 at 22:58
Or if you don't care about the original array (if you don't care if it gets sgrunk) you can use splice which cut items out from the array! Every time you call .splice(0, 2) you'll get different elements because the previous ones have been cut out from the original array! — ibrahim mahrir
– ibrahim mahrir, Commented Apr 7, 2017 at 23:09
Just put in mind that in this case splice should always start with 0 (.splice(0, amount))! — ibrahim mahrir
– ibrahim mahrir, Commented Apr 7, 2017 at 23:30
.shift cut only one item from the begining of the array, to use it you need a loop to cut as many as you want! Using .splice(0, amount) will cut amount of items from the begining so no loop is needed! If you'll need to loop through the result array of the spliceing then use shift . If you'll use the return array as a whole then use .splice. One thing to mention is that splice is safer because([1, 2].splice(0, 10000) === [1, 2]), in shift version you'll have to check if there still element in the array to see if you'll continue or not(otherwise undefineds ar returned)! — ibrahim mahrir
– ibrahim mahrir, Commented Apr 7, 2017 at 23:40
Plus with splice you could use forEach like this: array.splice(0, amount).forEach(function(img) { /* use img here */});! push is slightly better in performance! — ibrahim mahrir
– ibrahim mahrir, Commented Apr 7, 2017 at 23:41

Robert · Accepted Answer · 2017-04-07 23:21:17Z

2

I don't think there's a way to do exactly what you want, but you can just keep track of where you were in the array and do a slice from there, like this:

var nextSet = myArray.slice(lastIndex, lastIndex + 2);

Replace your existing click() with this (including the declaration of lastIndex) to try it:

var lastIndex = 0
$('.button').click(function() {
  var nextSet = myArray.slice(lastIndex, lastIndex + 2);
  lastIndex += 2;
  for (var i = 0; i < 2; i++) {
    var li = $('<li/>').attr('role', 'menuitem').appendTo('.myList').append('<img src=' + nextSet[i] + '>');
  }
});

Note that I've moved the slice() line outside the for loop. There's no need to slice a new array for every iteration.

Here's a CodePen using .slice().

An alternate method is to use to shift() to peel off the first item in the array with each iteration:

var nextItem = myArray.shift()

This is destructive though (it removes the item from the original array), so you'll need to make a copy of the original array first if you want to use it for anything else. Replace your click() with:

$('.button').click(function() {
  for (var i = 0; i < 2; i++) {
    var nextItem = myArray.shift();
    var li = $('<li/>').attr('role', 'menuitem').appendTo('.myList').append('<img src=' + nextItem + '>');
  }
});

Here's a CodePen using .shift().

edited Apr 7, 2017 at 23:21

answered Apr 7, 2017 at 23:06

Robert

6,8306 gold badges42 silver badges63 bronze badges

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

1 Comment

Kevin Marmet Over a year ago

Thank you! The .shift() method seems to be just what I was looking for! Again, thank you so much for that. Been working on this for SO long. You rock!

TypedSource · Accepted Answer · 2017-04-07 23:03:59Z

0

your problem is simple i think. you do a slice and allways get back the same array

var array = [0,1,2,3,4,5];
let newArray1 = array.slice(0,2); // returns a new array
let newArray2 = array.slice(0,2); // returns the same new array

for(var i = 0; i < 2; i = i+2) {
  result = array.slice(i, i+2);
  console.log(result);
}

answered Apr 7, 2017 at 23:03

TypedSource

7084 silver badges12 bronze badges

Collectives™ on Stack Overflow

How can you dynamically slice an array in Javascript/jQuery?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related