Javascript reverse() not working in the loop

Question

I have the following webservice call which I am using to populate a dropdown menu in the UI. I am getting these records in increasing number of createDate by the webservice if I am not using the reverse() method of Array. So I decided to use it in the following manner:

$.ajax({
        beforeSend: function(request) {
            request.setRequestHeader("eppn", emailID+"@abc.com");
          },
       
        url: 'http://localhost:8080/Services/getUserByDate?userid=JACK',
        type : 'GET',
 
        dataType:'json',
        success : function(data) {
                console.log("Sept 18 : Testing getUserByDate webservice");  
                console.log(data.usersList.reverse());
                $.each(data.usersList.reverse(), function (i) { 
                $("#userSetList").append('<option><a href="#" >'+data.usersList[i].title+' | '+data.usersList[i].userSetId+' | '+moment(data.usersList[i].createDate).format('MM/DD/YYYY')+'</a></option>');
                            
                });
        },
        error : function(request,error)
        {
             $.growl.error({title: "Error", message: "Webservice request failed!" });
        }
});

And noticed the following:

console.log("Sept 18 : Testing getUserByDate webservice");  
    console.log(data.usersList.reverse());

Above code showed the items in reversed format as expected. However, when I tested the following:

$.each(data.usersList.reverse(), function (i) { 
    $("#userSetList").append('<option><a href="#" >'+data.usersList[i].title+' | '+data.usersList[i].userSetId+' | '+moment(data.usersList[i].createDate).format('MM/DD/YYYY')+'</a></option>');
});

It’s not showing items in reverse order in the UI dropdown menu. Why?

Answer 1

reverse reverses an array in place and then returns it.

In your code, you reverse then array when calling console.log(data.usersList.reverse()); and then again in $.each(data.usersList.reverse(), .... Since you're reversing the same array twice, it's returned to its original order.

Instead, you can call reverse once, and then have the subsequent call use data.userList directly:

// data.userList is reversed in place
data.usersList.reverse();
console.log(data.userList);
$.each(data.usersList, function (i) { 
    $("#userSetList").append('<option><a href="#" >'+data.usersList[i].title+' | '+data.usersList[i].userSetId+' | '+moment(data.usersList[i].createDate).format('MM/DD/YYYY')+'</a></option>');        
});

Answer 2

array.reverse() as no problem.

const
  mySelect = document.getElementById('my-select')
, data =
    [ { val:'a', lib:'a_lib' }
    , { val:'b', lib:'b_lib' }
    , { val:'c', lib:'c_lib' }
    , { val:'d', lib:'d_lib' }
    ]
    
data.reverse().forEach(el=>{ mySelect.add( new Option(el.lib, el.val)) })

<select id="my-select"></select>