Using an array of strings to sort an array of objects in Javascript

Question

Many StackOverflow questions on sorting arrays in Javascript, however I could not find a question for this specific use case that involves a second array.

I have the following 2 arrays. One array is the main array of data, and the other array is used to filter + sort the main array:

let sortingArray = ['pts', 'ast', 'reb', 'stl']
let mainArray = [
  { key: 'stl', val1: '3', val2: 5 },
  { key: 'blk', val1: '5', val2: 1 },
  { key: 'pts', val1: '23', val2: 44 },
  { key: 'fgm', val1: '11', val2: 15 },
  { key: 'ast', val1: '13', val2: 15 },
  { key: 'reb', val1: '7', val2: 4 },
];

// Using the 2 arrays above, I am trying to create the following output
let outputArray = [
  { key: 'pts', val1: '23', val2: 44 },
  { key: 'ast', val1: '13', val2: 15 },
  { key: 'reb', val1: '7', val2: 4 },
  { key: 'stl', val1: '3', val2: 5 },
];

// My code so far
outputArray = mainArray
  .filter(row => sortingArray.includes(row.key))
  // .sort()

I can filter, however I am not sure how to handle this sort in the best manner. To clarify, I'd like the mainArray to be sorted based on the order of values in the sortingArray. I'm sure I could come up with an 5-10 line function that handles the sort using the sortingArray (via a loop of the array), however it would be great if there was a cleaner, 1-2 line arrow function I could use for this. This way, I would not have to break up the chaining of functions onto the mainArray.

Any thoughts or help on this would be great! I will update if I come up with an answer in the meanwhile.

Edit: Creating a separate-function to sort the array is quite straightforward:

let outputArray = [];
sortingArray.forEach(key => {
    let obj = mainArray.filter(row => row.key === key)[0];
    outputArray.push(obj);
}); 

However an arrow function would still be preferred here.

Answer 1

Use maps and index

sortingArray.map(y => mainArray[mainArray.map(x => x.key).indexOf(y)])

Answer 2

If you have for all wanted strings an object, you could take a Map and get the objects from the map.

let sortingArray = ['pts', 'ast', 'reb', 'stl'],
    mainArray = [{ key: 'stl', val1: '3', val2: 5 }, { key: 'blk', val1: '5', val2: 1 }, { key: 'pts', val1: '23', val2: 44 }, { key: 'fgm', val1: '11', val2: 15 }, { key: 'ast', val1: '13', val2: 15 }, { key: 'reb', val1: '7', val2: 4 }],
    result = sortingArray.map(
        Map.prototype.get,
        new Map(mainArray.map(o => [o.key, o]))
    );

console.log(result);

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

Answer 3

Could you solve the problem by inverting your operation and performing your actions on your sorting array?

let sortingArray = ['pts', 'ast', 'reb', 'stl']
let mainArray = [
  { key: 'stl', val1: '3', val2: 5 },
  { key: 'blk', val1: '5', val2: 1 },
  { key: 'pts', val1: '23', val2: 44 },
  { key: 'fgm', val1: '11', val2: 15 },
  { key: 'ast', val1: '13', val2: 15 },
  { key: 'reb', val1: '7', val2: 4 },
];

// Using the 2 arrays above, I am trying to create the following output
let outputArray = [
  { key: 'pts', val1: '23', val2: 44 },
  { key: 'ast', val1: '13', val2: 15 },
  { key: 'reb', val1: '7', val2: 4 },
  { key: 'stl', val1: '3', val2: 5 },
];

outputArray = sortingArray
  .map(key => mainArray.filter((row) => key === row.key))

Answer 4

Create an object from the mainArray, and take the values from this object. By doing this, you can avoid running the nested loops.

let sortingArray = ['pts', 'ast', 'reb', 'stl']
let mainArray = [
  { key: 'stl', val1: '3', val2: 5 },
  { key: 'blk', val1: '5', val2: 1 },
  { key: 'pts', val1: '23', val2: 44 },
  { key: 'fgm', val1: '11', val2: 15 },
  { key: 'ast', val1: '13', val2: 15 },
  { key: 'reb', val1: '7', val2: 4 },
];

function getResultant(sortingArray, mainArray) {
  const objFromArray = mainArray.reduce((acc, item) => {
    acc[item.key] = item;
    return acc;
  }, {});
  
  return sortingArray.map(item => objFromArray[item]);

}

console.log(getResultant(sortingArray, mainArray));