Move array objects/elements Up and Down by index

Question

I have an list of values with up and down button. If i want to click up button the element with move upwards with previous value in list and i click down button they moves downwards to next item in list. my sample code is here,

<ul>
  <li> 1 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li>
  <li> 2 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li>
  <li> 3 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li>
  <li> 4 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li>
  <li> 5 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li>
</ul>

<script type="text/javascript">
function moveUp(element) {
  if(element.previousElementSibling)
    element.parentNode.insertBefore(element, element.previousElementSibling);
}
function moveDown(element) {
  if(element.nextElementSibling)
    element.parentNode.insertBefore(element.nextElementSibling, element);
}
document.querySelector('ul').addEventListener('click', function(e) {
  if(e.target.className === 'down') moveDown(e.target.parentNode);
  else if(e.target.className === 'up') moveUp(e.target.parentNode);
});
    </script>

This is the code with list of values to display, but i want array values to display in this format which performs up and down function based on index. my array element is:

[
    { id: "Racer-101", rank: "1"},
    { id: "Racer-102", rank: "2"},
    { id: "Racer-103", rank: "3"},
    { id: "Racer-104", rank: "4"},
    { id: "Racer-105", rank: "5"},
    { id: "Racer-106", rank: "6"},
    { id: "Racer-107", rank: "7"},
    { id: "Racer-108", rank: "8"},
    { id: "Racer-109", rank: "9"}
]

how is it possible with array values..

Answer 1

If you want to perform the same thing with your array, all you need to do is to check if the given element has a previous or a next element so you can swap both objects to avoid an index out of bound.

This is how should be your code:

function moveUp(id) {
  let index = arr.findIndex(e => e.id == id);
  if (index > 0) {
    let el = arr[index];
    arr[index] = arr[index - 1];
    arr[index - 1] = el;
  }
}

To move an element up in the array, you need to make sure this element isn't the first element in the array, then perform the swap operation.

function moveDown(id) {
  let index = arr.findIndex(e => e.id == id);
  if (index !== -1 && index < arr.length - 1) {
    let el = arr[index];
    arr[index] = arr[index + 1];
    arr[index + 1] = el;
  }
}

To move an element down, you need to make sure this element isn't the last one in the array.

Demo:

This is a working Demo sample:

var arr = [
    { id: "Racer-101", rank: "1"},
    { id: "Racer-102", rank: "2"},
    { id: "Racer-103", rank: "3"},
    { id: "Racer-104", rank: "4"},
    { id: "Racer-105", rank: "5"},
    { id: "Racer-106", rank: "6"},
    { id: "Racer-107", rank: "7"},
    { id: "Racer-108", rank: "8"},
    { id: "Racer-109", rank: "9"}
];

function moveUp(id) {
  let index = arr.findIndex(e => e.id == id);
  if (index > 0) {
    let el = arr[index];
    arr[index] = arr[index - 1];
    arr[index - 1] = el;
  }
}

function moveDown(id) {
  let index = arr.findIndex(e => e.id == id);
  if (index !== -1 && index < arr.length - 1) {
    let el = arr[index];
    arr[index] = arr[index + 1];
    arr[index + 1] = el;
  }
}
moveDown("Racer-101");
moveUp("Racer-103");
console.log(arr);