How to find previous or next element from array in Javascript?

Question

I have one form where i am getting id .I am getting one array of ids from database. I have to check first that current_id is in array or not. for this I am writing below code that is working for me.

var arr = [{'id':4},{'id':5},{'id':7},{'id':8},{'id':9}];

   var  current_id = 5;
    for(var i=0; i<arr.length; i++) 
        {
            if (arr[i] == current_id) 
            return true;
        }

Now Suppose i want to go to previous id of current_id or i want to go to next id of current_id how to get this kind of data in javascript.

for example:

I am on current_id = 5. and user will click on previous_button then it should got to {'id':4} . and if user clicks on next_button then it should go to {'id':7}

If user is already on current_id = 4 and he clicks on previous_button it should return false. same for next_button.

thanks in advance.

Answer 1

You can do this by various methods.

var arr = [{'id':4},{'id':5},{'id':7},{'id':8},{'id':9}], arrids=arr.map(e=>e.id);
var current_id = 5, prev_btn = $("#prev"), next_btn = $("#nex");
prev_btn.click(e=>{ 
  current_id--;
  var prevObj = arr[arrids.indexOf(current_id)] ? arr[arrids.indexOf(current_id)] : null;
  console.log(prevObj);
});
next_btn.click(e=>{
  current_id++;
  var nextObj = arr[arrids.indexOf(current_id)] ? arr[arrids.indexOf(current_id)] : null;
  console.log(nextObj);
})

Change this for your needs.

Answer 2

You can set a current selected id position in global variable this way : For eg

let currentPos = 1;

then on click of prevButton you can navigate

arr[currentPos-1] & change currentPos = currentPos -1;

and same way for nextButton

arr[currentPos+1] & change currentPos = currentPos + 1;

Answer 3

Try Following using Jquery $.each loop

 var current_id = ''; function Redirect(type) { if(current_id=='') { current_id=5; } var arr = [{'id':4},{'id':5},{'id':7},{'id':8},{'id':9}]; $.each(arr,function(i,ID){ if(ID.id==current_id) { if(type=='Pre') { if(i!=0) { current_id=arr[i-1].id; alert('Previous ID is : '+current_id); return false;//This Return false is for break "$.each" loop } } else if(type=='Next') { if(i!=arr.length-1) { current_id=arr[i+1].id; alert('Next ID is : '+current_id); return false;//This Return false is for break "$.each" loop } } } }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="Redirect('Pre')">Previous</button> <button onclick="Redirect('Next')">Next</button> 

Answer 4

You can try this code here:

Description:

1. item index fine and check your current position in the array.

2. display the current index.

3. when prev button click check it's the first item is not an array when isn't condition the decrement one and display the value current item -1.

4. when you click the next the same condition and it last item or not check here and change the current index and display value increment 2.

in the next button click display increment by 2 at a time, because when current index increment on then it shows increment 2, the main reason is the element increase 1 and index contain is 0. so it's increment by 2 at a time.

if you show after the itemIndex--; then you increment by one.

 var arr = [{'id':4},{'id':5},{'id':7},{'id':8},{'id':9}]; var current_id = 5; //find the your current id is exist in the array var itemIndex = arr.map(function(o) { return o.id; }).indexOf(current_id); //display the value of index document.getElementById('display').innerHTML = itemIndex+1; document.getElementById('prev').addEventListener('click', function(e) { if(itemIndex!=-1 && itemIndex != 0){ document.getElementById('display').innerHTML = itemIndex; itemIndex--; } }); document.getElementById('next').addEventListener('click', function(e) { if(itemIndex!==-1 && arr.length-1 > itemIndex){ document.getElementById('display').innerHTML = itemIndex+2; itemIndex++; /*document.getElementById('display').innerHTML = itemIndex+1;*/ } }); 

 <div id="display"></div> <button id="prev">prev</button> <button id="next">next</button> 

Thank you