Creating "Next" and "Previous" buttons to navigate through an array using index?

Question

I am trying to implement "Next" and "Previous" button to help me navigate through items in an array.

I am using the index of items in the array to get the next or the previous item.

Example:

  arrA =  [{_id:1,name:"T-Rex"},{_id:3,name:"Predator X"},{_id:4 ,name:"Velociraptor"},{_id: 6, name:"Triceratops"}]

The the id of the current object is represent by

var selectedID = _id

Next and Previous functions

  next(){
      var idx = arrA.map(x => x._id).indexOf(selectedID);

      if (idx === arrA.length - 1){
       //return first item
          var next_name = arrA[0].name;
      } else {
        var next_name = arrA[idx + 1].name
  }


  previous(){
      var idx = arrA.map(x => x._id).indexOf(selectedID);

        if (idx === arrA[0]){
         // return  last item
            var prev_name = arrA[arrA.length -1].name;
        } else{
          var prev_name = arrA[idx -1].name
  }

}

The expected outcome is that when I click either of the buttons, it should take me to the immediate next or previous item, but the actual outcome is that it loops through the array non-stop.

How do you call next() and previous() ?

maximelian1986
– maximelian1986

2019-10-28 12:40:31 +00:00
Commented Oct 28, 2019 at 12:40 — maximelian1986
– maximelian1986, Commented Oct 28, 2019 at 12:40

kemicofa · Accepted Answer · 2019-10-28 12:51:13Z

2

Everything becomes much simpler when modulo (%) is used. It allows you to advance (forwards or backwards) in a list without worrying if you come at the beginning or end.

const arr =  [{_id:1,name:"T-Rex"},{_id:3,name:"Predator X"},{_id:4 ,name:"Velociraptor"},{_id: 6, name:"Triceratops"}]

let currentIndex = 0;
let currentId = arr[0]._id;

// initial log
log();

function next(){
  move();
}

function previous(){
  move(false);
}

function move(advance = true){
  currentIndex = (currentIndex + (advance ? 1 : -1) + arr.length) % arr.length;
  currentId = arr[currentIndex]._id;
  log();
}

function log(){
  console.log("Index: " + currentIndex, "Id: " + currentId);
}

<button onclick="previous();">Previous</button>
<button onclick="next();">Next</button>

answered Oct 28, 2019 at 12:51

kemicofa

17.7k10 gold badges93 silver badges145 bronze badges

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

5 Comments

Steve Gaita Over a year ago

this is working out fine, but when i click on either of the buttons it gets stuck in an infinite loop

kemicofa Over a year ago

@SteveGaita could you clarify what you mean by infinite loop? Are you referring to when you reach the end of the list that you start back at the start?

Steve Gaita Over a year ago

by infinite loop, i mean instead of it moving to the next or previous item with a click on either of the buttons, it moves loops through all the items with just one click, then repeats the whole process again without stopping.

kemicofa Over a year ago

@SteveGaita with my current setup that's not possible. Are you calling the next and previous multiple times in a row with a loop?

Steve Gaita Over a year ago

not really. Let me try and share my actual code implementation

Collectives™ on Stack Overflow

Creating "Next" and "Previous" buttons to navigate through an array using index?

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