Cannot reorder an array of objects in JS

tester123

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?

Vi100

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

expand and reorder an array of objects

Reorder array of objects that contain parent/child relationships with lodash or vanilla js

Reorder array in JS

How can I reorder the objects in a javascript array?

Reorder objects in array based on one of their string properties?

Reorder the objects in an array by object property numeric values

How to reorder based on another array in Angular JS

Create or reorder an array based on values from array of objects

Why I cannot map over this array of objects in React JS?

How can I reorder an ELEMENT inside of an OBJECT of an array of OBJECTS NOT sort?

How to reorder array of Core Data Objects and reorder it's Int attributes in Swift 3

How to reorder an array of objects using other array that has index and returns the new ordered array

Cannot find object in an array of objects

Cannot sort array of objects in react

Swagger cannot create array of objects

Cannot use .some() with array of objects

JS - converts objects to array

JS : Objects into array

JS array of objects destructuring?

Iterate array objects in js

sorting an array of objects JS

Convert an array of objects into an array of nested objects js

Cannot read property 'kind' of undefined in enger JS when adding objects to array

Vue.js: Cannot bind md-autocomplete model to array of objects

Vue.js "cannot read property 'undefined' of undefined" when accessing array of objects using Vue variable as index

Reorder an array with drag and drop

php reorder array of strings

How to reorder an Array

SwiftUI reorder CoreData Objects in List