Let's say I have a bunch of SKUs which look something like this:
{ id: '1234567', size: 'L', available: true, color: { id: 1234 }}
{ id: '1234588', size: 'XS', available: true, color: { id: 1234 }}
{ id: '1234568', size: 'M', available: true, color: { id: 1234 }}
{ id: '1234569', size: 'XL', available: true, color: { id: 1234 }}
{ id: '1234573', size: 'S', available: true, color: { id: 1234 }}
I also have an source of truth array that looks something like this:
{ "1234": ["XS", "S", "M", "L", "XL", "XXL"] }
The app is currently mapping the initial array of objects in order. As you can see, each SKU has the color identifier which is the key for the array of truth.
Normally this would be pretty simple to re-organize. Here's the issue:
The source of truth only returns available items. So, supposing that the inventory for "1234" was out of stock on everything except "XXL" the response would be ["XXL"]. I need all the other entries (items in the SKU) to show up, just be crossed out as sold out. But they all need to be in order.
In other words, if I receive the ["S", "M"] as the correct order, the result sould look like this:
{ id: '1234588', size: 'XS', available: true, color: { id: 1234 }}
{ id: '1234573', size: 'S', available: true, color: { id: 1234 }}
{ id: '1234568', size: 'M', available: true, color: { id: 1234 }}
{ id: '1234567', size: 'L', available: true, color: { id: 1234 }}
{ id: '1234569', size: 'XL', available: true, color: { id: 1234 }}
It seems doable but the longer I look at it the less possible it seems. Keep in mind also that the size isn't strictly limited to letters but can be alphanumeric (30D) or just numeric (43) or they could be words - "Full-size" so regular ole .sort() won't do.