Javascript sort array of objects based on another array

Question

I have an array of objects I need to sort based on another array objects. This is the given array that needs to be sorted:

const arr1 = [
    {
      id: 21,
      name: 'Joey',
      vehicle: 'car'
    },
    {
      id: 6,
      name: 'Kevin'
      vehicle: 'car'
    },
    {
      id: 10,
      name: 'Luis'
      vehicle: 'van'
    }
  ]

And this is the array that is in the proper order:

 const arr2 = [
    {
      id: 6,
      name: 'Kevin'
    },
    {
      id: 21,
      name: 'Joey'
    },
    {
      id: 10,
      name: 'Luis'
    }
  ]

There is no specific order to arr2 its just the data that comes back from my db. I basically just need to put the ids in arr1 in the same order as thet are in arr2. Ive tried using findIndex and sort but I am very confused

Answer 1

that ?

const arr1 = 
      [ { id: 21, name: 'Joey',  vehicle: 'car' } 
      , { id: 6,  name: 'Kevin', vehicle: 'car' } 
      , { id: 10, name: 'Luis',  vehicle: 'van' } 
      ];

const arr2 = 
      [ { id: 6,  name: 'Kevin' } 
      , { id: 21, name: 'Joey'  } 
      , { id: 10, name: 'Luis'  } 
      ];

      
// Arr1 ordered..
const arr1_ord = arr2.map(a2=> arr1.find(x=>x.id===a2.id));

console.log( arr1_ord );

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

Also, if there are only 2 items in arr2 I still want those elements that are missing to be at the end of the sorted arr1. Would this solve that?

I add another case : arr2 element doesn't have a arr1 same id

const
  arr1 = 
    [ { id: 21, name: 'Joey',  vehicle: 'car'       } 
    , { id: 6,  name: 'Kevin', vehicle: 'car'       } 
    , { id: 12, name: 'George', vehicle: 'carriage' } // not in arr2
    , { id: 10, name: 'Luis',  vehicle: 'van'       } 
    ] 
, arr2 = 
    [ { id: 6,  name: 'Kevin' } 
    , { id: 21, name: 'Joey'  } 
    , { id: 88, name: 'none'  } // not in arr1  
    , { id: 10, name: 'Luis'  } 
    ];
      
// Arr1 ordered..
const arr1_ord = arr2.reduce((res, {id},i,{[i+1]:next})=>
  {
  let a1 = arr1.find(x=>x.id===id);
  if (a1) res.push(a1);  // if exist in arr1
  if (next) return res;
  else return res.concat(arr1.filter(r=>!res.some(z=>z.id===r.id))); // add missing elements
  },[]);

console.log(  arr1_ord );

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

Answer 2

Array.prototype.sort can take in a custom comparison function to sort however you'd like it to. The function takes in two arguments (firstValue, secondValue) If that function returns a positive value, then secondValue goes before the firstValue, if it's 0 or negative, then firstValue is sorted before secondValue. First/second value are from the array you are sorting. In your case, you are sorting based on a different array, but that is fine since you can do that in your function.

You can do:

arr1.sort((firstValue, secondValue) => {
   return findIdInArr2(firstValue.id) - findIdInArr2(secondValue.id);
});

Where you would have to define findIdInArr2 to find the index in arr2, and you can use Array.prototype.findIndex to solve that problem. Where findIndex similarly takes in a function to find the index of something in an array.

function findIdInArr2(id) {

    const foundIndex = arr2.findIndex(function(obj) {
        return obj.id === id;
    });
    // If not found, this will be -1.  But that would sort all
    // unfound objects at the beginning of the array.
    // To place these objects at the end of the array, it needs to
    // return a number higher than the rest.  So return infinity.

    return (foundIndex === -1) ? Infinity : foundIndex;

}

note: findIndex is not available in IE, so you'd need to add a polyfill if you are planning on supporting IE.