Geek Answers Handbook

Array reordering in javascript

There are many questions / answers regarding this topic. No one matches my particular case. Hope someone can help:

I have an array of indices, for example:

var indexes = [24, 48, 32, 7, 11];

And an array of objects that look something like this:

 var items = [{ name : "whatever", selected : false, loading : true, progress : 55, complete : false }, { name : "whatever 2", selected : false, loading : false, progress : 100, complete : true }];

Each integer in the indexes array corresponds to the actual index of the object in the items array.

Finally, I have a variable that defines the new insertion position in the items array:

  var insertindex = ??

What I would like to do is take all the objects in the items array that have the indices stored in the indexes array, delete them, and then finally put them back, all next to each other at the specified index defined by the insertindex variable.

I'm trying to use splice() by copying objects at each index into a temporary array, then deleting them from the original array, and then finally iterating over this new temporary array and putting them back into the original array of elements in new positions, but it seems to hit on a brick wall and cannot make it work properly.

To summarize, I just want to take all the objects from the items array that correspond to the index defined in the index array, merge them and insert them into the predefined index back into the items array.

Help with conceptual visualization . If you think that the application is a javascript file manager, this allows you to reorder several file options that should not be contiguous. An array of indexes that defines the current selection and an array of items that defines a list of files. Finally, rearoderindex defines a new insertion position to which all selected files should be moved.

EDIT: As suggested correctly here, this is the code I'm playing now:

 function reorder(items, indexes, insertindex){ var offset = 0; var itemscopy = items.slice(0); //make shallow copy of original array var temparray = new Array(); // create temporary array to hold pulled out objects //loop through selected indexes and copy each into temp array for(var i=0, len=indexes.length; i<len; i++){ array[i] = itemscopy[self.cache.selecteditems[i]]; } //remove all selected items from items array for(var i=0, len=indexes.length; i<len; i++){ items.splice(indexes[i], 1); } //finally loop through new temp array and insert the items back into the items array at the specified index, increasing the index each iteration using the offset variable. for(var i=0, len=temparray.length; i<len; i++){ items.splice((insertindex+offset), 0, array[i]); offset++; } }

I know this is pretty terrible and this loop is not needed three times. But I tried many different methods, some of them worked when reordering in one direction, and some in another - mainly, but not at all. I decided that I would seek optimization of the function later as soon as I worked with precision.

I'm sure I have to do something very stupid or completely ignore something, but for life I can’t understand what right now.

+4
source share
2 answers

You can use the .splice() function to add elements to an array, as well as remove elements from it. General principle:

  • Sort indexes in increasing numerical order
  • Let's move on to indexes by deleting an element from this index (by adjusting the number of deleted elements) and save it in the removedItems array
  • Add the removedItems array to the required index

The code for this will look something like this:

 var removedItems = []; // sort indexes indexes.sort(function(a, b) { if(a < b) return -1; else if(b < a) return 1; return 0; }); for(var i = 0; i < indexes.length; i++) { var index = indexes[i]; removedItems.push(items.splice(index - removedItems.length, 1)); } var insertIndex = 1; items.splice.apply(items, [insertIndex, 0].concat(removedItems));

Check out this demo of jsFiddle .

+2
source

If you don't need the order of the indexes array, I would suggest another short solution:

 items.splice.apply(items, [insertIndex, 0].concat(indexes.sort(function(a, b) { return a - b; })).map(function(i, p) { return p > 1 ? items.splice(i - p + 2, 1).pop() : i; }));

DEMO: http://jsfiddle.net/T83fB/

To do this, I used the Array.map() method, which is not supported by older IE browsers. However, it is always easy to use a gasket from MDN .

+5
source

More articles:


All Articles