Move object up and down within array

Question

I have a table of data that is rendered from an object. Specifically, each row of the table is a value from the array.

I need to be able to move the object up or down in the array, depending on the button clicked.

var obj = [{
  "RuleDetailID": "11624",
  "AttributeValue": "172",
  "Value": "Account Manager",
  "IsValueRetired": "0"
}, {
  "RuleDetailID": "11626",
  "AttributeValue": "686",
  "Value": "Agent",
  "IsValueRetired": "0"
}, {
  "RuleDetailID": "11625",
  "AttributeValue": "180",
  "Value": "Analyst",
  "IsValueRetired": "0"
}, {
  "RuleDetailID": "11629",
  "AttributeValue": "807",
  "Value": "Individual Contributor",
  "IsValueRetired": "0"
}, {
  "RuleDetailID": "11627",
  "AttributeValue": "690",
  "Value": "Senior Agent",
  "IsValueRetired": "0"
}];

// Exmaple only, just rendering a table
function renderExample() {
  var table = '';
  for (var key in obj) {
    table += "<tr><td>" + obj[key].Value + "</td><td><a href=\"#\" onClick=\"move('up', " + obj[key].RuleDetailID + ")\">Move Up</a></td><td></td><td><a href=\"#\" onClick=\"move('down', " + obj[key].RuleDetailID + ")\">Move Down</a></td></tr>";
  }
  return table;
}

// Move the object in the array up or down
function move(value, positionChange) {

  // On run, move the object in the array up or down respectivly.

}

<table>
  <tbody id="example">
    <script>
      document.write(renderExample())
    </script>
  </tbody>
</table>

Can this be done with something like lodash or is it more of a manual approach? I tried by getting the index of the clicked item and then doing +1 or -1 accordingly to give me the new index. However, I wasn't sure what to do at that point since another item would already exist at that index.

How can I go about achieving this? Not looking for a jQuery approach, javascript or a library such as lodash only.

James · Accepted Answer · 2017-09-21 18:38:29Z

52

You can use array.splice twice, first to remove the item you want to move, and then to insert it into the new position

var data = [1,2,3,4,5];

function moveItem(from, to) {
  // remove `from` item and store it
  var f = data.splice(from, 1)[0];
  // insert stored item into position `to`
  data.splice(to, 0, f);
}

moveItem(0, 2);

console.log(data);

answered Sep 21, 2017 at 18:38

James

22.4k5 gold badges29 silver badges44 bronze badges

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

3 Comments

SBB Over a year ago

How do I know the to position its going to move to? Index of from +/- 1 ?

James Over a year ago

In renderExample you have a for loop which has the key variable (the array index of each item). So you could use moveItem(key, key - 1) to move an item up, and moveItem(key, key + 1) to move it down - keep in mind to special case the first and last items of your array so they can't be moved further up/down.

Jiro Matchonson Over a year ago

'data.splice(from, 1)[0]', "1" means that one element will be removed from 'from' index . This splice retun array of removed items, in this case array of one removed item [0]. 'data.splice(to, 0, f)', when 0 items are set to delete, another parameter(s) is requited for elements which will be put in array from "to" spot.

zaghnaboot · Accepted Answer · 2017-09-21 18:52:52Z

0

You can also use an old-school swap mechanism:

function move(value, positionChange) {
  // On run, move the object in the array up or down respectivly.
  for (var i = 0; i < obj.length; i++) {
    if (obj[i].RuleDetailID == positionChange) {
      var newIndex = value === 'up' ? i - 1 : i + 1;
      if (newIndex >= obj.length || newIndex < 0) return;
      var temp = obj[i];
      obj[i] = obj[newIndex];
      obj[newIndex] = temp;
      document.getElementById('example').innerHTML = renderExample();
    }
  }
}

answered Sep 21, 2017 at 18:52

zaghnaboot

11 bronze badge

2 Comments

Tarang Rathod Over a year ago

what is positionChange ??

sostom Over a year ago

A pythonic way of swapping items you can use here [itemList[currentIndex], itemList[otherIndex]] = [ itemList[otherIndex], itemList[currentIndex], ];

Waruyama · Accepted Answer · 2024-12-05 11:19:39Z

Instead of Array.splice() you can use Array.copyWithin(). This feels more natural, because the array's length does not have to be changed and element are only shifted once.

Here is the implementation from the top rated answer modified using Array.copyWithin():

let data = [1,2,3,4,5];

function moveItem(from, to) {
  const f = data[from];
  if (to > from) {
    // copy items after `from` until `to` one index to the left
    data.copyWithin(from, from + 1, to + 1);
  } else {
    // copy items from `to` until before `from` one index to the right
    data.copyWithin(to + 1, to, from);
  }
  // insert stored item into position `to`
  data[to] = f;
}

moveItem(2, 3);

console.log(data);

Array.copyWithin() has been supported by desktop and mobile browsers for at least 8 years, so it should be safe to use it.

Edit: It seems like using Array.splice() is much faster in this case. Here is my benchmark: https://measurethat.net/Benchmarks/Show/32906

Collectives™ on Stack Overflow

Move object up and down within array

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related