how to sort array in forward and reverse manner Javascript

Question

I am trying to play with an array. I created two buttons PushUP and PushDown. PushUp button will sort the array in forward manner and PushDown in reverse manner. I am trying so hard but failed to figure out but failed to do so. What should I write in order to get the following output. Also, how would I show this data before clicking any Push button and then change the order by button accordingly. For example, initially I want to show 2 buttons with the data.

For example, output should be something like that on clicking the following buttons.

Original array:

1 xyz
2 abc, 123
3 asd

On clicking PushUp:

3 asd
1 xyz
2 abc, 123

On clicking PushDown:

1 xyz
2 abc, 123
3 asd

My code:

var details = [
{intro: "ABC"},
{due: " MON"},
{name: "XYZ", sn: "SN xxxxx"},
{lab: "Tuesday 4:30-6:30"}
];
function Push_Up(){
   details.sort();
   displayPUSH();
}
function displayPUSH() {
    document.getElementById("up").innerHTML =
    "<br>" +
    "CSIT128" + " :" + details[0].intro + "<br><br>"      + 
    "Assignment 5"+ ", " + details[1].due   + "<br><br>"    +
     details[2].name + ", " + details[2].sn + "<br><br>" +
    "Computer LAB" + " :" + details[3].lab + "<br><br>";
 }
 function Push_Down(){
    var details_after ="";
    for ( var i=0; i<details.length; i++ )
    {
        displayPUSH(); 
    } 
    document.getElementById("down").innerHTML = details_after;
 }

<button onClick="Push_Up()"> Push Up </button>
<br>
<div id="up">
</div>

<button onClick="Push_Down()"> Push Down </button>
<br>
<div id="down">
</div>
<br>

So basically your data will be always same as 1 xyz 2 abc 3 asd On clicking PushUp: 3 asd 1 xyz 2 abc — Murtaza Manasawala
– Murtaza Manasawala, Commented Sep 16, 2018 at 7:51
Sounds like you're trying to circular shift the items, not sort them. Is that correct? — Petr Broz
– Petr Broz, Commented Sep 16, 2018 at 7:54
Yes it is something like rotation or circular shift but not exactly sorting. — mmkk347
– mmkk347, Commented Sep 16, 2018 at 7:56

Petr Broz · Accepted Answer · 2018-09-16 08:03:07Z

1

If you're trying to do circular shift, here's one possible approach:

let data = [
  'foo',
  'bar',
  'baz'
];

function output() {
  document.getElementById('results').innerHTML = data.map(item => `<li>${item}</li>`).join('');
}

document.getElementById('up').addEventListener('click', function() {
  const first = data.shift();
  data.push(first);
  output();
});

document.getElementById('down').addEventListener('click', function() {
  const last = data.pop();
  data.unshift(last);
  output();
});

output();

<button id="up">Push Up</button>
<button id="down">Push Down</button>
<ul id="results"></ul>

answered Sep 16, 2018 at 8:03

Petr Broz

10.1k2 gold badges18 silver badges30 bronze badges

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

4 Comments

mmkk347 Over a year ago

Yes this exactly what I need. But, Is it in JQuery ?? I didnt learn that so far. I need it to be done with javascript only. i pasted your code to .html and tried to run via Chrome and its not working.

Petr Broz Over a year ago

It's not using any library, but it does use some modern JavaScript features like "fat arrows" or string interpolation. Have you tried running the code using the "Run code snippet" button?

mmkk347 Over a year ago

Yes, "Run code snippet" runs perfectly fine. I need this code on .html file to run on chrome.

Petr Broz Over a year ago

Try this gist: gist.github.com/petrbroz/411854de5a404385fc70686c36d2457c.

Collectives™ on Stack Overflow

how to sort array in forward and reverse manner Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related