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.

AKT · Accepted Answer · 2020-06-24 19:51:28Z

3

Use maps and index

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

edited Jun 24, 2020 at 19:51

answered Jun 24, 2020 at 19:34

AKT

1,0818 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Canovice Over a year ago

The filtering is not my question. My question is related to the sorting.

AKT Over a year ago

Is this what you need? now it will return as per your order of sortingArray

Nina Scholz · Accepted Answer · 2020-06-24 20:02:18Z

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; }

answered Jun 24, 2020 at 20:02

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

wassona · Accepted Answer · 2020-06-24 19:50:50Z

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))

Karan Singh · Accepted Answer · 2020-06-24 20:05:19Z

1

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));

answered Jun 24, 2020 at 20:05

Karan Singh

3901 gold badge2 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related