Move an element to the front of an array: Javascript

Question

I have an array of objects with this format

let arr = [ { name: "test1", id: 5}, { name: "test2", id: 6 } , { name: "test3", id: 8 } ]

Now I basically want to move the item with 6 to the front of the array by re-arranging so that result becomes

let result = [ { name: "test2", id: 6 } , { name: "test1", id: 5}, { name: "test3", id: 8 } ]

What I have tried

   const found = arr.find((element) => {
        return element.id === 6;
   });
   if (found) {
        const [...arr, found] = arr;
        return found;
      } else {
        return arr;
   }

Answer 1

You can make use of Array.unshift and Array.splice.

let arr = [{name:"test1",id:5},{name:"test2",id:6},{name:"test3",id:8}]

const moveToFront = (data, matchingId) => {
  //find the index of the element in the array
  const index = data.findIndex(({id}) => id === matchingId);
  if(index !== -1) {
    //if the matching element is found, 
    const updatedData = [...data];
    //then remove that element and use `unshift`
    updatedData.unshift(...updatedData.splice(index, 1));
    return updatedData;
  }
  //if the matching element is not found, then return the same array
  return data;
}

console.log(moveToFront(arr, 6));

.as-console-wrapper {
  max-height: 100% !important;
}

Answer 2

You can use Array.unshift() to add element to the beginning of the array and Array.splice() to remove the array element.

let arr = [ { name: "test1", id: 5}, { name: "test2", id: 6 } , { name: "test3", id: 8 } ]
let result = [...arr];

const index = result.findIndex(e => e.id === 6)
result.unshift(result.splice(index, 1)[0])

console.log(result);

Answer 3

You could sort the array with the delta of the checks.

const
    array = [{ name: "test1", id: 5 }, { name: "test2", id: 6 }, { name: "test3", id: 8 }];

array.sort((a, b) => (b.id === 6) - (a.id === 6));

console.log(array);

Answer 4

const array = [{ name: "test1", id: 5 }, { name: "test2", id: 6 }, { name: "test3", id: 8 }];
 const sortedArray = array.sort((a, b) => (b.id === 6) - (a.id === 6)); console.log(sortedArray);

discusses an easy way to sort your JavaScript Array by the order of the index number for each item in the Array object. This can be helpful if you want to sort alphabetically and not need to create a new String Array with a function like String.sort().

A quick tip that can be useful to you if you want a quick solution to sorting an Array in JavaScript is below.Remember that it is always best practice to use the Array methods built into the language. They are created to work fast and efficient. However, if you really want to sort your array by index number and not have an array of strings, then this article will be for you.:

String→Number: When a function returns a Number value, then JavaScript interprets it as being equal to the Number value in the code...The function is used by passing two parameters, which should return true when they are equal and false when they are not equal.In this case, we are sort of reverse comparing them. We are checking the ID of the items inside the Array to see if they match, but we subtract one to check if they are less than. This is because when we call .sort(), JavaScript is sorting alphabetically and an ID with a value of 6 will be at the end of the list. So, a value of -1 will make it appear in the correct order.If you want to use this method for your Array, then please add a comment below!

Answer 5

You can make use of filter and unshift

let arr = [{ name: "test1", id: 5 },{ name: "test2", id: 6 },{ name: "test3", id: 8 }];
let firstObject;
let result = arr.filter((value) => {
  if (value.id != 6) return value;
  firstObject = value;
});
result.unshift(firstObject);
console.log(result);