Sort array objects by property value in specific order

Question

I have an array of objects that I'd like to sort using each object's property value compared against an ordered list of corresponding values.

Let's say I have this array of strings; food groups:

[ 'protein',
  'dairy',
  'fruit',
  'vegetable' ]

And I also have an array of objects, food items, each belonging to one of the former food groups by the property group:

[
  { group: 'vegetable', name: 'broccoli' },
  { group: 'protein', name: 'beef' },
  { group: 'fruit', name: 'apple' },
  { group: 'vegetable', name: 'peas' },
  { group: 'dairy', name: 'cheese' },
  { group: 'protein', name: 'tofu' },
  { group: 'vegetable', name: 'bell pepper' },
  { group: 'dairy', name: 'milk' },
  { group: 'fruit', name: 'grapes' },
  { group: 'protein', name: 'chicken' },
]

Given the order of the food groups in the first array, how can I sort the food items using their object group properties, to result in this:

[
  { group: 'protein', name: 'beef' },
  { group: 'protein', name: 'tofu' },
  { group: 'protein', name: 'chicken' },
  { group: 'dairy', name: 'cheese' },
  { group: 'dairy', name: 'milk' },
  { group: 'fruit', name: 'apple' },
  { group: 'fruit', name: 'grapes' },
  { group: 'vegetable', name: 'broccoli' },
  { group: 'vegetable', name: 'peas' },
  { group: 'vegetable', name: 'bell pepper' },
]

While I'm doing this in Javascript, I'm sure this would be more or less the same across a few languages.

Any help is greatly appreciated!

Answer 1

array.sort( (foodA, foodB) =>
  groups.indexOf( foodA.group ) - groups.indexOf( foodB.group )
)

My example is in ES6, but could easily be rewritten in older versions. Here is a reference to the sort function - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 2

You can use forEach & filter array method. Iterate over the food groups & for each element filter out the matched element from the group, & store in a new array

var order = ['protein',
  'dairy',
  'fruit',
  'vegetable'
]

var orgArry = [{
    group: 'vegetable',
    name: 'broccoli'
  },
  {
    group: 'protein',
    name: 'beef'
  },
  {
    group: 'fruit',
    name: 'apple'
  },
  {
    group: 'vegetable',
    name: 'peas'
  },
  {
    group: 'dairy',
    name: 'cheese'
  },
  {
    group: 'protein',
    name: 'tofu'
  },
  {
    group: 'vegetable',
    name: 'bell pepper'
  },
  {
    group: 'dairy',
    name: 'milk'
  },
  {
    group: 'fruit',
    name: 'grapes'
  },
  {
    group: 'protein',
    name: 'chicken'
  },
];
var newArray = [];
order.forEach(function(item) {
  return orgArry.filter(function(groupName) {
    if (groupName.group === item) {
      newArray.push(groupName)
    }
  })
});

console.log(newArray)

Answer 3

You can sort your array using array#sort and finding the index of the group as it exists in the order array, but sorting won't be stable.

var orders = [ 'protein', 'dairy', 'fruit', 'vegetable' ],
    data = [ { group: 'vegetable', name: 'broccoli' }, { group: 'protein', name: 'beef' }, { group: 'fruit', name: 'apple' }, { group: 'vegetable', name: 'peas' }, { group: 'dairy', name: 'cheese'}, { group: 'protein', name: 'tofu' }, { group: 'vegetable', name: 'bell pepper' }, { group: 'dairy', name: 'milk' }, { group: 'fruit', name: 'grapes' }, { group: 'protein', name: 'chicken' } ];
data.sort((a,b) => orders.indexOf(a.group) - orders.indexOf(b.group))
console.log(data);

To have a stable sort, you can try the below implementation.

var orders = [ 'protein', 'dairy', 'fruit', 'vegetable' ],
    data = [ { group: 'vegetable', name: 'broccoli' }, { group: 'protein', name: 'beef' }, { group: 'fruit', name: 'apple' }, { group: 'vegetable', name: 'peas' }, { group: 'dairy', name: 'cheese'}, { group: 'protein', name: 'tofu' }, { group: 'vegetable', name: 'bell pepper' }, { group: 'dairy', name: 'milk' }, { group: 'fruit', name: 'grapes' }, { group: 'protein', name: 'chicken' }],
    result = data.map(({group},i) => ({item:orders.indexOf(group), index: i}))
                .sort((a,b) => a.item - b.item || a.index - b.index)
                .map(({index}) => data[index]);
    
console.log(result);