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..

Well you shouldn't updated your question with the code from the answer, it will be confusing, But anyway, I don't see any bindings of the moveUp() and moveDown() functions with buttons in your code. — cнŝdk
– cнŝdk, Commented Nov 29, 2018 at 11:20
I will update my first coding, my main problem is to display this array values in table. how to define the array values in table with this function, this up and down function perform on click. — Stella-007
– Stella-007, Commented Nov 29, 2018 at 11:38

cнŝdk · Accepted Answer · 2018-11-29 07:48:15Z

8

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);

edited Nov 29, 2018 at 7:48

answered Nov 29, 2018 at 7:41

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

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

4 Comments

Stella-007 Over a year ago

It works fine, but i want to display all array values in table with up and down buttons in every row. Based on clicking button in the row to change previous and next position in the table..

cнŝdk Over a year ago

@NewUSer I don't have any experience with knockout, but all you have to do is to pass the id to the moveUp() and moveDown functions correctly.

Stella-007 Over a year ago

ok, how is it possible to display this array values in table using jquery with click function. Is any other methods to bind data in the table..

cнŝdk Over a year ago

Please update your question, with the relevant Knockout code, you ahve tried. Normally if you call the functions from your Knockout code, it will handle the rendering dynamically.

Collectives™ on Stack Overflow

Move array objects/elements Up and Down by index

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