Move array item to front by object key

Question

So I have an array of objects;

[
    {
        "foo": 2,
        "bar": "test"
    },
    {
        "foo": 19,
        "bar": "value"
    },
    {
        "foo": 7,
        "bar": "temp"
    }
]

I need to move an object with a particular value of foo to the beginning of the array. The value is always in the object, but there's no guarantee the object will be in the array.

So after running moveToFront(19); for instance, I'd have the following:

[
    {
        "foo": 19,
        "bar": "value"
    },
    {
        "foo": 2,
        "bar": "test"
    },
    {
        "foo": 7,
        "bar": "temp"
    }
]

How would I go about doing this?

Answer 1

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.