Move item in array to last position

JavascriptArraysSorting

Javascript Problem Overview


I have an array of objects. I want to move a selected object to the last position in the array. How do I do this in javascript or jquery?

Here is some code I have:

var sortedProductRow = this.product_row;

for (var s in sortedProductRow) {
    if (sortedProductRow[s]["parent_product_type"] != "")
        // Move this object to last position in the array
}

I'm looping through this with a for loop, and I want the output to be ordered so that all objects that does not have a "parent_product_type" value comes first, then those with a value.

Javascript Solutions


Solution 1 - Javascript

to move an element (of which you know the index) to the end of an array, do this:

array.push(array.splice(index, 1)[0]);

If you don't have the index, and only the element, then do this:

array.push(array.splice(array.indexOf(element), 1)[0]);

Example:

    var arr = [1, 2, 6, 3, 4, 5];
    arr.push(arr.splice(arr.indexOf(6), 1)[0]);
    console.log(arr); // [1, 2, 3, 4, 5, 6]

> NOTE: > > this only works with Arrays (created with the [ ... ] syntax or > Array()) not with Objects (created with the { ... } syntax or > Object())

Solution 2 - Javascript

Moving the first element of an array to the end of the same array

    var a = [5,1,2,3,4];
    a.push(a.shift());
    console.log(a); // [1,2,3,4,5]

or this way

    var a = [5,1,2,3,4];
    var b = a.shift();
    a[a.length] = b;
    console.log(a); // [1,2,3,4,5]

Moving any element of an array to any position in the same array

    // move element '5' (index = 2) to the end (index = 4)
    var a = [1, 2, 5, 4, 3];
    a.splice(4,0,a.splice(2,1)[0]);
    console.log(a); // [1, 2, 4, 3, 5]

or it could be converted to a prototype as well, like this where x represents the current position of element while y represents the new position in array

Usage for array prototype modification :

var a = [1, 2, 5, 4, 3];
Array.prototype.move = function(x, y){
      this.splice(y, 0, this.splice(x, 1)[0]);
      return this;
    };
    
    a.move(2,4);
    console.log(a); // ["1", "2", "4", "3", "5"]

Answer to the @jkalandarov comment

function moveToTheEnd(arr, word){
  arr.map((elem, index) => {
    if(elem.toLowerCase() === word.toLowerCase()){
      arr.splice(index, 1);
      arr.push(elem);
    }
  })
  return arr;
}
console.log(moveToTheEnd(["Banana", "Orange", "Apple", "Mango", "Lemon"],"Orange"));

Solution 3 - Javascript

This is more clean, without using the array index of [0]

const colors = ['white', 'black', 'red', 'blue', 'green'];

// will push the blue to the end of the array
colors.push(colors.splice(colors.indexOf('blue'), 1).pop());

console.debug(colors);
// ["white", "black", "red", "green", "blue"]

Solution 4 - Javascript

Using an anonymous function you can pass in the array and the value to filter by.

let concatToEnd = function (arr, val) {
        return arr.filter(function(x) {
            return x !== val; // filter items not equal to value
        }).concat(arr.filter(function(x) { // concatonate to filtered array
            return x === val; // filter items equal to value 
        })
    );
}

// invoke
concatToEnd(array, 'parent_product_type');

You could probably shorten this further:

let concatToEnd = (arr,val) => arr.filter(x => x !== val).concat(arr.filter(x => x === val))

This function filters the items which do not equal the value passed in, then concatenates the result (to the end of the filtered array) of another filter function which filters out the items which do equal the value you've passed in.

This function essentially separates the array into 2 filtered parts and then concatenates them back together

This hasn't been tested for your use-case, but I've used something similar to move all numbers of an array to the end of the index.

Solution 5 - Javascript

Immutable way:

const changedArr = [...prevArr.filter(a => a !== element), element]

Solution 6 - Javascript

Move any element to last position - for lodash users:

    const array = ['A', 'B', 'C', 'D'] // output: A, B, C, D
    
// finds index of value 'B' and removes it
    _.pull(array , 'B') // output: A, C, D

// adds value of 'B' to last position
    _.concat(array , 'B') // output: A, C, D, B

Solution 7 - Javascript

You can move any number of items by splicing them, then spreading them into a push.

const numberOfItems = 3;
let items = [1,2,3,4,5,6,7,8,9];
items.push(...items.splice(0, itemsToMove))

Solution 8 - Javascript

Moving all items equal so something to the end can also be done by concat.

const myArray = [1, 0, 3, 5, 0, 'a', 3, 's']
    
const moveZerosToEnd = (arr) => {
   return arr.filter(item => item !== 0).concat(arr.filter(item => item === 0))
}

console.log(myArray)                 // [1, 0, 3, 5, 0, 'a', 3, 's']
console.log(moveZerosToEnd(myArray)) // [1, 3, 5, 'a', 3, 's', 0, 0] 

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJohan DahlView Question on Stackoverflow
Solution 1 - JavascriptFerdi265View Answer on Stackoverflow
Solution 2 - Javascripthex494D49View Answer on Stackoverflow
Solution 3 - JavascriptMedoView Answer on Stackoverflow
Solution 4 - JavascriptUncaughtTypeErrorView Answer on Stackoverflow
Solution 5 - JavascriptNagibabaView Answer on Stackoverflow
Solution 6 - JavascriptAdvemView Answer on Stackoverflow
Solution 7 - JavascriptDjaveView Answer on Stackoverflow
Solution 8 - JavascriptAbeldlpView Answer on Stackoverflow