Swap objects in the array without mutating the array

Question

I am doing dragndropping and I need to swap the elements when swaping, there is an array of objects and the index of the active object and the one that is swapped, how can I swap them in js without mutating the original object

let allData = [{name:1},{name:2},{name:3}]

I need get after swapping

[{name:2},{name:1},{name:3}]

example what i need to do

case CHANGE_TAB_ORDER:
            const {activeElementIndex} = action.payload;
            const {swapedElementIndex} = action.payload

            return {
                ...state,
                stages: ? here i need to swap objects in array with  activeElementIndex and  swapedElementIndex
            }

stages is array of objects

Does this answer your question? Swap two array elements in a functional way — Heretic Monkey
– Heretic Monkey, Commented Nov 17, 2020 at 18:03
yes but how can I swap them correct way in reducer, I update my question — alex
– alex, Commented Nov 17, 2020 at 18:18
What was confusing in the answers? Some of them provide functions that take an array and two indexes and return the mutated array... — Heretic Monkey
– Heretic Monkey, Commented Nov 17, 2020 at 18:25

Roberto · Accepted Answer · 2023-06-12 12:24:19Z

2

If you want to make operations in the array without mutating the original object you should make a copy first, and then you only need a temp variable to swap the items, returning the new array.

const array = [{name: 1}, {name: 2}, {name: 3}]; // Originalarray

const arrayCopy = array.slice(); // Clone the array

function swapItems(pos1, pos2, nextArray) {
  const temp = nextArray[pos1]; // Temp variable
  nextArray[pos1] = nextArray[pos2]; // Swap the items
  nextArray[pos2] = temp;
  return nextArray; // Return the array
}

const swappedArray = swapItems(0, 1, arrayCopy);
console.log(swappedArray); // Print the array :)

edited Jun 12, 2023 at 12:24

answered Nov 17, 2020 at 18:20

Roberto

2631 silver badge10 bronze badges

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

1 Comment

TAHER El Mehdi Over a year ago

swappedArray print an object, not an array.

Dmitry Reutov · Accepted Answer · 2020-11-18 09:15:24Z

0

without mutating you mean create a copy? Then like this.

const {activeElementIndex, swapedElementIndex} = action.payload
return {
  ...state,
  stages: (stages => { 
    [stages[activeElementIndex], stages[swapedElementIndex]] =
      [stages[swapedElementIndex], stages[activeElementIndex]];
    return stages })([...state.stages])  
}

(If you want to save an old then just replace [...state.stages] in my code with state.stages)

edited Nov 18, 2020 at 9:15

answered Nov 17, 2020 at 18:33

Dmitry Reutov

3,0321 gold badge9 silver badges22 bronze badges

Collectives™ on Stack Overflow

Swap objects in the array without mutating the array

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related