Rearrange the elements in an array containing objects

Question

Rearrange the elements in an array containing objects

I am working with an array of objects:

const array = [
  {
    id: "5a2524432b68c725c06ac987",
    customOrder: 1,
    name: "One",
  },
  {
    id: "5a2524432b68sgs25c06ac987",
    customOrder: 2,
    name: "Two",
  },
  {
    id: "5a252wfew32b68c725c06ac987",
    customOrder: 3,
    name: "Three",
  },
  {
    id: "5a25gffe32b68c725c06ac987",
    customOrder: 4,
    name: "Four",
  },
  {
    id: "5a2524432b68c725c06acfee7",
    customOrder: 5,
    name: "Five",
  },
  {
    id: "5a2524432b68c725c06ac556",
    customOrder: 6,
    name: "Six",
  },
]

If I update the customOrder property of one object and need to adjust the customOrder values of the other elements accordingly, for example changing index 2 to have a custom order of 4, resulting in:

const array = [
  {
    id: "5a2524432b68c725c06ac987",
    customOrder: 1,
    name: "One",
  },
  {
    id: "5a2524432b68sgs25c06ac987",
    customOrder: 2,
    name: "Two",
  },
  {
    id: "5a25gffe32b68c725c06ac987",
    customOrder: 3,
    name: "Four",
  },
  {
    id: "5a252wfew32b68c725c06ac987",
    customOrder: 4,
    name: "Three",
  }
  {
    id: "5a2524432b68c725c06acfee7",
    customOrder: 5,
    name: "Five",
  },
  {
    id: "5a2524432b68c725c06ac556",
    customOrder: 6,
    name: "Six",
  },
]

I'm pondering over using methods like array.slice() or possibly utilizing lodash's _.putAt(), but I am exploring simpler approaches to achieve the desired outcome.

javascript ecmascript-6

Answer 1

Answer №1

Follow these four steps to achieve it:

Utilize Array.findIndex() to find the entry with the same value as the one you want to update at the specified index.
Update the value of this entry to match the value of the item at that index.
Then, replace the item at the given index with the new value.
Lastly, swap the items. If there isn't an item with the new value, sort the array to ensure the item is in the correct position.

This method alters the original array:

const array = [{id:"5a2524432b68c725c06ac987",customOrder:1,name:"One",},{id:"5a2524432b68sgs25c06ac987",customOrder:2,name:"Two",},{id:"5a252wfew32b68c725c06ac987",customOrder:3,name:"Three",},{id:"5a25gffe32b68c725c06ac987",customOrder:4,name:"Four",},{id:"5a2524432b68c725c06acfee7",customOrder:5,name:"Five",},{id:"5a2524432b68c725c06ac556",customOrder:6,name:"Six",},]

const swap = (arr, x, y) => [arr[x], arr[y]] = [arr[y], arr[x]];

function setOrder(arr, idx, value) {
  const idx2 = arr.findIndex(x => x.customOrder === value);
  if (idx2 >= 0) arr[idx2].customOrder = arr[idx].customOrder;
  arr[idx].customOrder = value;
  
  if (idx2 >= 0) swap(arr, idx, idx2);
  else arr.sort((a, b) => a.customOrder - b.customOrder);
  return arr;
}

setOrder(array, 2, 4);
console.log(array);

setOrder(array, 2, 10);
console.log(array);

This approach keeps the original array intact:

const array = [{id:"5a2524432b68c725c06ac987",customOrder:1,name:"One",},{id:"5a2524432b68sgs25c06ac987",customOrder:2,name:"Two",},{id:"5a252wfew32b68c725c06ac987",customOrder:3,name:"Three",},{id:"5a25gffe32b68c725c06ac987",customOrder:4,name:"Four",},{id:"5a2524432b68c725c06acfee7",customOrder:5,name:"Five",},{id:"5a2524432b68c725c06ac556",customOrder:6,name:"Six",},]

const swap = (arr, x, y) => [arr[x], arr[y]] = [arr[y], arr[x]];

function setOrder(arr, idx, value) {
  const out = [...arr];
  const idx2 = out.findIndex(x => x.customOrder === value);
  if (idx2 >= 0) out[idx2] = { ...out[idx2], customOrder: out[idx].customOrder };
  out[idx] = { ...out[idx], customOrder: value };
  
  if (idx2 >= 0) swap(out, idx, idx2);
  else out.sort((a, b) => a.customOrder - b.customOrder);
  return out;
}

console.log(setOrder(array, 2, 4));
console.log(setOrder(array, 2, 10));

Answer 2

Follow these four steps to achieve it:

Utilize Array.findIndex() to find the entry with the same value as the one you want to update at the specified index.
Update the value of this entry to match the value of the item at that index.
Then, replace the item at the given index with the new value.
Lastly, swap the items. If there isn't an item with the new value, sort the array to ensure the item is in the correct position.

This method alters the original array:

const array = [{id:"5a2524432b68c725c06ac987",customOrder:1,name:"One",},{id:"5a2524432b68sgs25c06ac987",customOrder:2,name:"Two",},{id:"5a252wfew32b68c725c06ac987",customOrder:3,name:"Three",},{id:"5a25gffe32b68c725c06ac987",customOrder:4,name:"Four",},{id:"5a2524432b68c725c06acfee7",customOrder:5,name:"Five",},{id:"5a2524432b68c725c06ac556",customOrder:6,name:"Six",},]

const swap = (arr, x, y) => [arr[x], arr[y]] = [arr[y], arr[x]];

function setOrder(arr, idx, value) {
  const idx2 = arr.findIndex(x => x.customOrder === value);
  if (idx2 >= 0) arr[idx2].customOrder = arr[idx].customOrder;
  arr[idx].customOrder = value;
  
  if (idx2 >= 0) swap(arr, idx, idx2);
  else arr.sort((a, b) => a.customOrder - b.customOrder);
  return arr;
}

setOrder(array, 2, 4);
console.log(array);

setOrder(array, 2, 10);
console.log(array);

This approach keeps the original array intact:

const array = [{id:"5a2524432b68c725c06ac987",customOrder:1,name:"One",},{id:"5a2524432b68sgs25c06ac987",customOrder:2,name:"Two",},{id:"5a252wfew32b68c725c06ac987",customOrder:3,name:"Three",},{id:"5a25gffe32b68c725c06ac987",customOrder:4,name:"Four",},{id:"5a2524432b68c725c06acfee7",customOrder:5,name:"Five",},{id:"5a2524432b68c725c06ac556",customOrder:6,name:"Six",},]

const swap = (arr, x, y) => [arr[x], arr[y]] = [arr[y], arr[x]];

function setOrder(arr, idx, value) {
  const out = [...arr];
  const idx2 = out.findIndex(x => x.customOrder === value);
  if (idx2 >= 0) out[idx2] = { ...out[idx2], customOrder: out[idx].customOrder };
  out[idx] = { ...out[idx], customOrder: value };
  
  if (idx2 >= 0) swap(out, idx, idx2);
  else out.sort((a, b) => a.customOrder - b.customOrder);
  return out;
}

console.log(setOrder(array, 2, 4));
console.log(setOrder(array, 2, 10));

Answer 3

Answer №2

To easily remove an item at a specific index and move it to a new index, you can utilize the splice method. Then update the order of items in the array by using customOrder with the help of forEach

(If you prefer not to modify the original array, you can create a copy using spread syntax and then use the map method)

const array = [{id:"5a2524432b68c725c06ac987",customOrder:1,name:"One",},{id:"5a2524432b68sgs25c06ac987",customOrder:2,name:"Two",},{id:"5a252wfew32b68c725c06ac987",customOrder:3,name:"Three",},{id:"5a25gffe32b68c725c06ac987",customOrder:4,name:"Four",},{id:"5a2524432b68c725c06acfee7",customOrder:5,name:"Five",},{id:"5a2524432b68c725c06ac556",customOrder:6,name:"Six",},]

function updateOrder(input, index, newIndex) {
  let copy = [...input];
  const removed = copy.splice(index, 1);
  copy.splice(newIndex, 0, removed[0]);
  return copy.map((a, i) => ({ ...a, customOrder: i+1 }))
}

console.log(updateOrder(array, 2, 3))

By allowing mutation:

const array = [{id:"5a2524432b68c725c06ac987",customOrder:1,name:"One",},{id:"5a2524432b68sgs25c06ac987",customOrder:2,name:"Two",},{id:"5a252wfew32b68c725c06ac987",customOrder:3,name:"Three",},{id:"5a25gffe32b68c725c06ac987",customOrder:4,name:"Four",},{id:"5a2524432b68c725c06acfee7",customOrder:5,name:"Five",},{id:"5a2524432b68c725c06ac556",customOrder:6,name:"Six",},]

function updateOrderMutation(input, index, newIndex) {
  const removed = input.splice(index, 1);
  input.splice(newIndex, 0, removed[0]);
  input.forEach((a, i) => a.customOrder = i + 1)
  return input;
}

console.log(updateOrderMutation(array, 2, 3))

Answer 4

To easily remove an item at a specific index and move it to a new index, you can utilize the splice method. Then update the order of items in the array by using customOrder with the help of forEach

(If you prefer not to modify the original array, you can create a copy using spread syntax and then use the map method)

const array = [{id:"5a2524432b68c725c06ac987",customOrder:1,name:"One",},{id:"5a2524432b68sgs25c06ac987",customOrder:2,name:"Two",},{id:"5a252wfew32b68c725c06ac987",customOrder:3,name:"Three",},{id:"5a25gffe32b68c725c06ac987",customOrder:4,name:"Four",},{id:"5a2524432b68c725c06acfee7",customOrder:5,name:"Five",},{id:"5a2524432b68c725c06ac556",customOrder:6,name:"Six",},]

function updateOrder(input, index, newIndex) {
  let copy = [...input];
  const removed = copy.splice(index, 1);
  copy.splice(newIndex, 0, removed[0]);
  return copy.map((a, i) => ({ ...a, customOrder: i+1 }))
}

console.log(updateOrder(array, 2, 3))

By allowing mutation:

const array = [{id:"5a2524432b68c725c06ac987",customOrder:1,name:"One",},{id:"5a2524432b68sgs25c06ac987",customOrder:2,name:"Two",},{id:"5a252wfew32b68c725c06ac987",customOrder:3,name:"Three",},{id:"5a25gffe32b68c725c06ac987",customOrder:4,name:"Four",},{id:"5a2524432b68c725c06acfee7",customOrder:5,name:"Five",},{id:"5a2524432b68c725c06ac556",customOrder:6,name:"Six",},]

function updateOrderMutation(input, index, newIndex) {
  const removed = input.splice(index, 1);
  input.splice(newIndex, 0, removed[0]);
  input.forEach((a, i) => a.customOrder = i + 1)
  return input;
}

console.log(updateOrderMutation(array, 2, 3))

Rearrange the elements in an array containing objects

Answer №1

Answer №2

Similar questions

What is the best way to retrieve all SVG objects within a specific area in an Angular application?

Encountering an issue with React npm causing errors that I am unable to resolve

Using JQuery to automatically scroll and anchor to the bottom of a dynamically populated div, but only if the user doesn't

Ways to retrieve the current state within a function after invoking the setState method

Tips for determining if an array of objects, into which I am adding objects, contains a particular key value present in a different array of objects

Having trouble updating the URL path with the $location service in Angular

Display only alphabetic characters in the text field

When executing a function, the previous React state continues to linger

Creating a Python server for an Angularjs application and capturing user input

Using Vue.js to pass a variable from a parent component to a child component

Leveraging Next.js ISR to pass extra information to the getStaticProps function from the getStaticPaths

Struggling to troubleshoot an error - Invalid key Token '{' found at column 2

Retrieve the computed value of a cell in an Excel spreadsheet using Node.js

Best practices for loading and invoking Javascript in WordPress child themes

Enabling real-time notifications through Express 4 middleware with socket.io integration

Tips for executing a function in jQuery when a Pop up appears

Loop through the input fields using ng-repeat while maintaining consistent values for each iteration

Angular JS is throwing an error because it cannot recognize the property 'push' of undefined

Using Next-auth.js: Redirecting from getServerSideProps to a specific callback URL - How can it be done?

JavaScript - Two tables shown in parallel