How to get next and previous five element of from an array?-CodePudding

I have an array which consist n element.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

and also have two button next and prev and initially i am showing the first 5 element(on page load) of an array initial array [1, 2, 3, 4, 5]

how i can show the next five elements on the next button click [6, 7, 8, 9, 10] and on previous button click want to show the [1, 2, 3, 4, 5]

and also need to check the if it does not have any next element if lastIndex is included and if array includes first element.

i have tried using slice to arr.slice(begin[, end])

CodePudding user response：

You could take an index and a size for the wanted elements ans dlice the array.

const
    data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
    show = array => document.getElementById('items').innerHTML = array.join(' '),
    next = () => {
        index  = size;
        while (index >= data.length) index -= size;
        show(data.slice(index, index   size));
    },
    prev = () => {
        index -= size;
        while (index < 0) index  = size;
        show(data.slice(index, index   size));
    },
    size = 5;

let index = 0;

document.getElementById('bprev').addEventListener('click', prev);
document.getElementById('bnext').addEventListener('click', next);

show(data.slice(index, index   size));

<button id="bprev">prev</button> <span id="items"></span> <button id="bnext">next</button>

CodePudding user response：

you can chunk your array in several part and maintain a display index to say which part of the chunk array should be displayed

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
const chunkSize = 5;
let chunkIndex = 0;
let result;

function display() {
  document.getElementById('value').innerText = result[chunkIndex];
}

function previous() {
  if (chunkIndex > 0) {
    chunkIndex--;
  }
  display();
}

function next() {
  if (chunkIndex < result.length - 1) {
    chunkIndex  ;
  }
  display();
}

function chunkArray(array) {
  let chunkData = [];
  for (let i = 0; i < array.length; i  = chunkSize) {
    chunkData.push(array.slice(i, i   chunkSize))
  }
  return chunkData;
}

result = chunkArray(array);
display();
console.log(result);

<div id="value"></div>

<button onclick="previous()">previous</button>
<button onclick="next()">next</button>

CodePudding user response：

const arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
const size = 5
let current = 1

function prev(){
  if(current > 1){
    current--
    let newArr = getNewArr()
    console.log(newArr)
  }
}

function next(){
  if(current >= 1 && current <= (arr.length - 1)/size){
    current  
    let newArr = getNewArr()
    console.log(newArr)
  }
}

function getNewArr(){
  return arr.slice(size*current - size ,size*current)
}

<button onclick=prev()>prev</button>
<button onclick=next()>next</button>

CodePudding user response：

For now I am just creating a demo with the hardcoded pageNumber in next and previous click events but you can make it dynamic based on the array size.

Working Demo :

// Input array
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Method which returns the updated array elements based on the pageSize and pageNumber.
const paginate = (array, pageSize, pageNumber) => {
  return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
}

// On load initializing 5 elements.
document.getElementById('content').innerHTML =  paginate(arr, 5, 1);

// Next button click event
document.getElementById('next').onclick = function() {
    document.getElementById('content').innerHTML =  paginate(arr, 5, 2);
};

// previous button click event
document.getElementById('previous').onclick = function() {
    document.getElementById('content').innerHTML =  paginate(arr, 5, 1);
};

<button id="previous">Previous</button>
<span id="content"></span>
<button id="next">Next</button>