Move array item to front by object key

Shortest way: Array.some

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

Note that Array.find also breaks the iteration once target is found, but it isn't' supported on IE.

var data = [{"foo":2}, {"foo":19}, {"foo":7}, {"foo":22}]

// if {foo:7} is found, move it to the front and break iteration
data.some((item, idx) => 
  item.foo == 7 && 
  data.unshift( 
    // remove the found item, in-place (by index with splice), 
    // returns an array of a single item removed
    data.splice(idx,1)[0] 
  ) 
)


// print result
console.log(data)

If you don't want to mutate the original Array, you can do:

var data = [{"foo":2}, {"foo":19}, {"foo":7}, {"foo":22}]

// if {foo:7} is found, move it to to the front and break iteration 
const clonedData = [...data]
clonedData.some((item, i, arr) => item.foo == 7 && arr.unshift(item))

// print result
console.log(clonedData)

findIndex method will be helpful

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

var data = [{"foo":2}, {"foo":19}, {"foo":7}, {"foo":22}]

// find the index of the target array item:
var itemIndex = data.findIndex(item => item.foo == 7); 

data.splice(
    0,                           // new index,
    0,                           // no removal
    data.splice(itemIndex, 1)[0] // detach the item and return it
);

// print result
console.log(data)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

If you use lodash and need to have legacy browsers support, use the _.findIndex method:

_.findIndex(data, {foo:19});

This will move the Array Object with the key "foo": 19 to the beginning of the array.

You can iterate the array, find the right element, splice it and concat the rest of the array to the spliced array.

var collection = [
  {
    foo: 15,
    bar: true
  },
  {
    foo: 19,
    bar: false
  }
];

function moveToFront(x) {
  for (var i = 0; i < collection.length; i++) {
    if (collection[i].foo === x) {
      collection = collection.splice(i, 1).concat(collection);
      break;
    }
  }
}

moveToFront(19);

console.log(collection);

This should be fairly trivial, you search your array until you find the item you are looking for then you splice it out and unshift it back to the beginning. Something like this:

// foo is the target value of foo you are looking for
// arr is your array of items
// NOTE: this is mutating. Your array will be changed (unless the item isn't found)
function promote(foo, arr) {
    for (var i=0; i < arr.length; i++) {
        if (arr[i].foo === foo) {
            var a = arr.splice(i,1);   // removes the item
            arr.unshift(a[0]);         // adds it back to the beginning
            break;
        }
    }
    // Matching item wasn't found. Array is unchanged, but you could do something
    // else here if you wish (like an error message).
}

If there is no item with a matching foo value, then this will do nothing to your array. You can handle that with an error message if desired.