Sort JavaScript Array in Artificial Order

Question

I have an array returned by a REST query that represents the number of items in a multi-step production process.

var steps = [
  { name:'Package', value:3},
  { name:'Assemble', value:1 },
  { name:'Ship', value:7},
  { name:'Preprocess', value:9 },
  { name:'Paint', value:5 }
];

I'd like to sort them in the order of the process, like this:

1. Preprocess
2. Paint
3. Assemble
4. Package
5. Ship

I have other alphanumeric sorts that I am doing with Underscore but I cannot figure this one out.

Answer 1

You could take an object for the wanted order with numerical values for the position. Then sort by this values.

var steps = [{ name: 'Package', value: 3 }, { name: 'Assemble', value: 1 }, { name: 'Ship', value: 7 }, { name: 'Preprocess', value: 9 }, { name: 'Paint', value: 5 }],
    order = { Preprocess: 1, Paint: 2, Assemble: 3, Package: 4, Ship: 5 };
    
steps.sort(({ name: a }, { name: b }) => order[a] - order[b]);

console.log(steps);

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

Answer 2

You can create an object which mentions the priority on each name while ordering.

let priority = {
  Preprocess: 1,
  Paint: 2,
  Assemble: 3,
  Package: 4,
  Ship: 5,
}

var steps = [
  { name:'Package', value:3},
  { name:'Assemble', value:1 },
  { name:'Ship', value:7},
  { name:'Preprocess', value:9 },
  { name:'Paint', value:5 }
];

const result = steps.sort((a,b) => priority[a.name] - priority[b.name]);

console.log(result);

Answer 3

I'm just using a precedence map for every step type so that I can use it in the compare function.

var steps = [
    { name: 'Package', value: 3 },
    { name: 'Assemble', value: 1 },
    { name: 'Ship', value: 7 },
    { name: 'Preprocess', value: 9 },
    { name: 'Paint', value: 5 }
];
var stepPrecedenceMap = new Map([["Preprocess", 1], ["Paint", 2], ["Assemble", 3], ["Package", 4], ["Ship", 5]])

console.log(
steps.sort((stepA, stepB) => {  
return stepPrecedenceMap.get(stepA.name) - stepPrecedenceMap.get(stepB.name)
}));