Cannot reorder an array of objects in JS

Question

I have an array of objects which are presented to the user as blocks. They can drag and drop to change the order that that blocks appear, which I then want to change the position of the objects in the array.

$scope.myArray = [{a:1,b:2,c:3}, {a:11,b:22,c:33}, {a:111,b:222,c:333}];

function orderChanged(event) {
  console.log($scope.myArray);
    //logs [{a:1,b:2,c:3}, {a:11,b:22,c:33}, {a:111,b:222,c:333}]

  console.log("source:", event.source.index, "dest:", event.dest.index);
    //logs source: 1 dest: 2

  $scope.myArray.move(event.source.index, event.dest.index);

  console.log($scope.myArray);
    //logs [{a:1,b:2,c:3}, {a:11,b:22,c:33}, {a:111,b:222,c:333}]
};

//this is going to rearrange the array
Array.prototype.move = function (from, to) {
  this.splice(to, 0, this.splice(from, 1)[0]);
};

The orderChange event has the source index and destination index as integers that represent their order as present to the user, which also maps to their positions in the array before any moving has occurred.

I cannot get the array to rearrange, each time I log the array in the orderChange function both logs return the same order.

All of the other examples of array re-ordering are for arrays that do not contain objects, I'm wondering if this is what is messing up my code?

Try to put a console.log(this); in the body of the move function, Javascript's this is confusing sometimes ^^ — Noctisdark, Nov 26 '15 at 14:40
You are using AngularJS. Why are you messing with the DOM? Add a property called Order to each of your objects and let Angular do the syncrhonisation... that what is meant for. — Vi100, Nov 26 '15 at 14:43
In short, take a look at this module, maybe it would do your life easier: http://ngmodules.org/modules/ng-sortable — Vi100, Nov 26 '15 at 14:51
I'm testing your code and works ok. Where are you modifying the Array prototype? Just try to replace the call to move() with the code that actually does the reorder and test... — Vi100, Nov 26 '15 at 15:01
@Vi100 I defiantly was confusing myself by where I places my console.logs... ng-sortable does in fact reorder the array for you, I thought I was logging before the change event happened, but I wasn't. Thanks for pointing me in the right direction. — tester123, Nov 26 '15 at 15:26
@tester123 I've posted an answer for you with my comments, please check it as valid, reputation counts! Thanks — Vi100, Nov 26 '15 at 15:33

score 0 · Accepted Answer · answered Nov 26 '15 at 15:31

I'm testing your code and works ok. Where are you modifying the Array prototype? Just try to replace the call to move() with the code that actually does the reorder and test...

Anyway, you're using AngularJS. Why are you messing with the DOM? Add a property called Order to each of your objects and let Angular do the syncrhonisation... that what is meant for.

In short, take a look at this module, maybe it would do your life easier:

http://ngmodules.org/modules/ng-sortable

I was confusing myself with where I put the logs, you directed me to realized this with your comments. Thanks — tester123, Nov 26 '15 at 16:10

score 0 · Answer 2 · edited May 23 '17 at 12:15

I think, your code works ok, but the log does not.

console.log might not represent the values at runtime, but at viewtime, especially with multidimensional objects and arrays.

Try a different log to see console.log($scope[0].a, $scope[1].a, $scope[2].a)

You might want to check in a different brwoser, as this seems to be a Chrome issue, see here:
Is Chrome's JavaScript console lazy about evaluating arrays?
Wrong value in console.log

Cannot reorder an array of objects in JS

2 Answers2