Say I have an array that looks like this:

$array = ['xl', 's', '1', '10', '3', 'xs', 'm', '3T', 'xxl', 'xxs', 'one size'];

I want to sort the array to look like this:

$sortedArray = ['1', '3', '3T', '10', 'one size', 'xxs', 'xs', 's', 'm', 'xl', 'xxl'];

How could I possibly sort this array in javascript?

I can spot a pattern so that helps me get on the right track, but I can't figure out the sort function. A pattern being all sizes that start with a number are first, ordered numerically (but not sure how '3T' handles that). And then we show 'one size', and then we sort the rest (XXS, XS, S, M, L, XL, XXL) based on a predefined order.

Say I have an array that looks like this:

$array = ['xl', 's', '1', '10', '3', 'xs', 'm', '3T', 'xxl', 'xxs', 'one size'];

I want to sort the array to look like this:

$sortedArray = ['1', '3', '3T', '10', 'one size', 'xxs', 'xs', 's', 'm', 'xl', 'xxl'];

How could I possibly sort this array in javascript?

I can spot a pattern so that helps me get on the right track, but I can't figure out the sort function. A pattern being all sizes that start with a number are first, ordered numerically (but not sure how '3T' handles that). And then we show 'one size', and then we sort the rest (XXS, XS, S, M, L, XL, XXL) based on a predefined order.

• javascript
• jquery
• arrays
• sorting

• can there be more things in the array than "things that are numbers or start with numbers", "one size" and the normal sizes? like how general does this need to be? why is "one size" where it is? – bryan60 Commented Aug 19, 2020 at 16:25
• first number (eventually with char after it), than one size, xxs -xxl. Is this right? – Sascha A. Commented Aug 19, 2020 at 16:27
• you can have a look here, for example. – Nina Scholz Commented Aug 19, 2020 at 16:32

6 Answers 6

Using sort with userdefined sort algorithm: I parse both both to pare to an Int. Than I look if only one of them is a number than this is before. If both are numbers than I look if both are equal. If so than I take the rest from the string (which is not part of the Int) and pare them alphabetically. Otherwise I pare both Integers.
If none of abouve cases is true than I have my ORDER-array with the confection sizes and I sort for the indexOf this. If there are missing any, you can easily add them.

Extended: Because the sizes are sometimes xxl or XXL I convert them for sorting to lowercases so they are sorted as desired.

Extended 2: Because 2XL would be sorted to the beginning to the numbers I make another trick: After parsing to integer I look if the string is one out of the ORDER-array. If so I set the parsed integer to NaN like there stnds a string. By this the parison for the keywords takes place for this entry.

Extended 3: Sorting of 0 was false, I added it to the begin (like OP's proposal).

array = ['XL', 's', '1', '10', '2xl', '3', '0', 'xs', 'm', '3T', 'xxl', 'xxs', 'one size'];
const ORDER = ['one size', 'xxs', 'xs', 's', 'm', 'xl', '2xl', 'xxl'];

array.sort((a,b) => {
    a = a.toLowerCase();
    b = b.toLowerCase();
    
    let nra = parseInt(a);
    let nrb = parseInt(b);
    
    if ((ORDER.indexOf(a)!=-1)) nra = NaN;
    if ((ORDER.indexOf(b)!=-1)) nrb = NaN;
  
    if (nrb===0) return 1;
    if (nra&&!nrb || nra===0) return -1;
    if (!nra&&nrb) return 1;
    if (nra && nrb) {
        if (nra==nrb) {
            return (a.substr((''+nra).length)).localeCompare((a.substr((''+nra).length)));
        } else {
            return nra-nrb;
        }
    } else {
        return ORDER.indexOf(a) - ORDER.indexOf(b);
    }
});

console.log(array);

You can define the weights of each size, and then sort according to it:

let array = ['xl', 's', '1', '10', '3', 'xs', 'm', '3T', 'xxl', 'xxs', 'one size'];
let weights = {
  '1':1, 
  '3':2, 
  '3T':3, 
  '10':4, 
  'one size':5, 
  'xxs':6, 
  'xs':7, 
  's':8, 
  'm':9, 
  'xl':10, 
  'xxl':11
};
let sortedArray = array.sort((a,b)=>weights[a]-weights[b]);
console.log(sortedArray)

Another way to think about this, would be paring the values normally if both are numeric, and rely on weights parison otherwise:

let array = ['xl', 's', '1', '10', '3', 'xs', 'm', '3T', 'xxl', 'xxs', 'one size'];
let weights = {
  '1':1, 
  '3':2, 
  '3T':3, 
  '10':4, 
  'one size':5, 
  'xxs':6, 
  'xs':7, 
  's':8, 
  'm':9, 
  'xl':10, 
  'xxl':11
};
let sortedArray = array.sort((a,b)=>{
     if(typeof(a)=="number" && typeof(b)=="number")
          return a-b;
     else
          return weights[a]-weights[b]
});
console.log(sortedArray)

I would avoid predefined weights and orders, and simply set s = -1; m = 0; l = 1 and let preceeding xes be multipliers. Additionally, sort numbers before strings, as there's no point in mixing different grading systems.

function sortArrayOfGradings(array) {
    function parseGradingOrder(grading) {
        let order;
        if (grading.includes('s'))
            order = -1;
        else if (grading.includes('m'))
            order = 0;
        else if (grading.includes('l'))
            order = 1;
        const n = Number(grading.match(/\d+(?!X)/))
        const numXes = grading.match(/x*/)[0].length
        const mul = n ? n : numXes + 1
        return order * mul;
    }
    return array.sort((a, b) => {
        if (!isNaN(a) && !isNaN(b))
              return a-b;
        if (!isNaN(a) && isNaN(b))
            return -1
        if (isNaN(a) && !isNaN(b))
            return 1
        if (isNaN(a) && isNaN(b)) {
            let aOrder = parseGradingOrder(a.toLowerCase());
            let bOrder = parseGradingOrder(b.toLowerCase());
            return aOrder-bOrder;
        }
    });
}

Then you could sort any thing like 'XXXl' and '2xl' together (not case sensitive):

sortArrayOfGradings(['xxxxl', '2xl', 'l'])
// returns ['l', '2xl', 'xxxxl']

And:

sortArrayOfGradings(['xxxxl', '5xl', 'l'])
// returns ['l', 'xxxxl', '5xl']

But you could also throw numbers in there:

sortArrayOfGradings([2, 2, 1, 4, 'XL', '2xl', 'xs'])
// returns [1, 2, 2, 4, 'xs', 'XL', '2xl']

Well. Let us have an HTML-elements with text inside. Like this:

<div class="sizes">
    <div class="size">
        <label for="size-s">S</label>
        <input type="radio" name="size" value="s" id="size-s">
    </div>
    <div class="size">
        <label for="size-xl">XL</label>
        <input type="radio" name="size" value="xl" id="size-xl">
    </div>
    <div class="size">
        <label for="size-3xl">3XL</label>
        <input type="radio" name="size" value="3xl" id="size-3xl">
    </div>
<div>

First of all - prepare mon variables and constants;

  const sizesBlock = document.querySelector('.sizes');
  const sizes = sizesBlock.querySelectorAll('.size');
  const sizesMap = new Map();
  const order = [
    '2xs',
    'xxs',
    'xs',
    's',
    'm',
    'l',
    'xl',
    '2xl',
    'xxl',
    '3xl',
    'xxxl', 
    '4xl',
    'xxxxl',
    'os'
  ];
  const sizesArraySorted = [];

We need to fill the "sizesArraySorted" with "null"s, it will help us in the future...

  while(order.length > sizesArraySorted.length) {
    sizesArraySorted[sizesArraySorted.length] = null;
  }

Fill "sizesMap":

    sizes.forEach(size => {
      if (size  && typeof size !== 'undefined') {
      let sizeName = size.querySelector('label').innerText;
        if (sizeName) {
          sizesMap.set(sizeName, size);
        }
      }
    });

Arrange elements from "sizesMap" by positions from "order" and fill "sizesArraySorted":

    for (let pair of sizesMap.entries()) {
      let key = pair[0].toLowerCase();
      let element = pair[1];
      let position = order.indexOf(key);
      if (position > -1) {
        sizesArraySorted.splice(position, 0, element);
      }
    }

And refresh HTML block with elements:

    sizesBlock.innerHTML = '';
    sizesArraySorted.forEach(element => {
      if (element) {
        // console.log(element);
        sizesBlock.appendChild(element);
      }
    });

Full JS:

{
  const sizesBlock = document.querySelector('.sizes');
  const sizes = sizesBlock.querySelectorAll('.size');
  const sizesMap = new Map();
  const order = [
    '2xs',
    'xxs',
    'xs',
    's',
    'm',
    'l',
    'xl',
    '2xl',
    'xxl',
    '3xl',
    'xxxl', 
    '4xl',
    'xxxxl',
    'os'
  ];
  const sizesArraySorted = [];
  while(order.length > sizesArraySorted.length) {
    sizesArraySorted[sizesArraySorted.length] = null;
  }

  if (sizes && sizesBlock) {
    sizes.forEach(size => {
      if (size  && typeof size !== 'undefined') {
      let sizeName = size.querySelector('label').innerText;
        if (sizeName) {
          sizesMap.set(sizeName, size);
        }
      }
    });

    for (let pair of sizesMap.entries()) {
      let key = pair[0].toLowerCase();
      let element = pair[1];
      let position = order.indexOf(key);
      if (position > -1) {
        sizesArraySorted.splice(position, 0, element);
      }
    }
  
    sizesBlock.innerHTML = '';
    sizesArraySorted.forEach(element => {
      if (element) {
        // console.log(element);
        sizesBlock.appendChild(element);
      }
    });
  }
}

I just implemented it like that and it seems to work fine:

const orderedSizes = ["S", "M", "L", "XL", "XXL"];
const unorderedSizes = ["L", "XL", "S"];
const variantSizes = orderedSizes.filter((size) =>
    unorderedSizes.includes(size)
);
const smallestSize = variantSizes[0];
const largestSize = variantSizes[variantSizes.length - 1];
        
console.log(`${smallestSize} - ${largestSize}`)

The short answer is: you don't.

I am assuming that what you really want to do is to be able to sort other things based on their size, where the order is determined by some (as far as Javascript is concerned, arbitrary) ordering specified by a list. So you would do just that: write a sort routine that would pare items by their size's relative position in that list.

Or just look at @MajedBadawi's answer.